我努力學習D3,我期待這個例子: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);
});
我需要改變圓和屬性的追加。我想使用條件所以
.attr("d", function(d,i) {if (d["Cereal Name"] == "Nabisco" return d3.svg.symbol().type("circle");
else if (d["Cereal Name"] == "Post" return d3.svg.symbol().type("triangle-down");
else return d3.svg.symbol().type("circle")
但是,這不適合我。有沒有人有如何做到這一點的見解?我不想擁有所有的圈子,根據示例中麥片的品牌名稱,我想要不同的形狀。謝謝。
編輯:我試圖尋找這個:
Filter data in d3 to draw either circle or square
但我無法得到這個工作
我仍然困惑,如何 svg.selectAll 。數據(數據) 。進入() .append( 「圓圈」) .attr( 「類」, 「點」) .attr( 「R」,3.5) .attr( 「CX」,XMAP ) .attr(「cy」,yMap) 可以更改。這是我想改變的主要部分,以反映您所做的事情。我能放置在.enter()之後完成的工作嗎? –
對於使用d3.symbol,你必須追加路徑,而不是圓圈。路徑沒有使用x,y,cx或cy定位。在鏈接中添加該代碼並創建一個可運行的Plunker /小提琴/無論如何,我會爲您更換它。 –
非常感謝Gerardo:https://plnkr.co/edit/BGJvgGIsPNCWX0d2iXYN?p=preview –