我有一段代码，我试图根据传入的参数（0 或 1）动态确定要使用的符号和颜色。但是，当我尝试设置逻辑时，出现属性 d 的路径错误。代码如下
svg.selectAll(".point")
.data(data)
.enter()
.append("path")
.attr("class", "point")
.attr("d", function(d){
if(d.zeroOrOne == 1){
return d3.svg.symbol().type("cross");
}else if (d.zeroOrOne == 0){
return d3.svg.symbol().type("circle");
}
})<
.attr('fill', 'none')
.attr('stroke', function(d){
if(d.zeroOrOne == 1){
return 'blue';
}else if (d.zeroOrOne == 0){
return 'red';
}
})
.attr("transform", function(d) { return "translate(" + ratingScale(d.xParam) + "," + winsNomsScale(d.yParam) + ")"; });
如果我删除条件符号逻辑并严格限制一个符号或另一个符号，则一切正常，但我无法弄清楚为什么添加条件逻辑会导致问题。这是错误：
错误：属性 d：预期的移动路径命令（'M' 或 'm'），“函数 n(n,r){...
使用单独的函数来创建符号并调用它
var data = [{"zeroOrOne" : 0 }, {"zeroOrOne" : 1 }, {"zeroOrOne" : 2 }];
// use this for generating symbols
var arc = d3.svg.symbol().type(function(d) {
if(d.zeroOrOne == 0) {
return "circle";
}
else if(d.zeroOrOne == 1) {
return "cross";
}
else return "triangle-up";
});
d3.select("#graph").selectAll(".point")
.data(data)
.enter()
.append("path")
.attr("class", "point")
.attr("d", arc)
.attr('fill', 'none')
.attr('stroke', function(d){
if(d.zeroOrOne == 1){
return 'blue';
}else if (d.zeroOrOne == 0){
return 'red';
}
else return "green";
})
.attr("transform", function(d, i) { return "translate(" + (i + 1) * 20 + " ,30 )"; });
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg id="graph" width="200", height="200" >
</svg>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
