我正在尝试学习 D3,正在看这个例子:
http://bl.ocks.org/weiglemc/6185069
我现在想做的是改变点的形状,所以我想要基于数据集中谷物品牌的圆形、正方形和三角形,而不是所有圆形作为数据点。这看起来应该是一个简单的更改,但当我进行更改时,我无法显示形状。
我知道需要在这一段代码中进行此更改:
svg.selectAll(".dot")
.data(data)
.enter().append("circle")
.attr("class", "dot")
.attr("r", 3.5)
.attr("cx", xMap)
.attr("cy", yMap)
.style("fill", function(d) { return color(cValue(d));})
.on("mouseover", function(d) {
tooltip.transition()
.duration(200)
.style("opacity", .9);
tooltip.html(d["Cereal Name"] + "<br/> (" + xValue(d)
+ ", " + yValue(d) + ")")
.style("left", (d3.event.pageX + 5) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
tooltip.transition()
.duration(500)
.style("opacity", 0);
});
Run Code Online (Sandbox Code Playgroud)
我需要更改圆的附加和属性。我想使用条件所以
.attr("d", function(d,i) {if (d["Cereal Name"] == "Nabisco" return d3.svg.symbol().type("circle");
else if (d["Cereal Name"] == "Post" return …Run Code Online (Sandbox Code Playgroud)