d3 js d3.stratify()如何处理新列
问题描述:
为了在我的整齐树形图上对圆进行颜色编码,我使用了scaleThreshold()函数。 我有名字(id)的第一列和值(sc)的第二列。 每个名称都有一个值。d3 js d3.stratify()如何处理新列
如果值= 0,则的该圆/图表上的那些人将是灰色 如果1个<值< 3然后,该圆/图表上的那些人将是黄色 如果4 <值< 10则是圆/图表上的那些人是橙色 如果11 <值< 20则是圆/图表上的人会发黄
我现在很努力添加列“sc”。
是它的分层()函数.SC(函数(d){回报d.sc}?
圆圈则是彩色的,然后根据该值
node.append("circle")
.attr("r", 3.5)
.style("fill", function(d) { return color(Sc.value) });
任何建议?如何preceed 感谢
<script>
var color = d3.scaleThreshold()
.domain([1, 4, 11])
.range(["grey", "yellow", "orange", "Green"]);
color(-1); // "grey"
color(0); // "grey"
color(1); // "yellow"
color(3); // "yellow"
color(4); // "orange"
color(10); // "orange"
color(11); // "red"
color(20); // "red"
color(1000); // "red"
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height"),
g = svg.append("g").attr("transform", "translate(40,0)");
var tree = d3.tree()
.size([height, width - 160]);
var stratify = d3.stratify()
.parentId(function(d) { return d.id.substring(0, d.id.lastIndexOf(".")); });
d3.csv("flare.csv", function(error, data) {
if (error) throw error;
var root = stratify(data)
.sort(function(a, b) { return (a.height - b.height) || a.id.localeCompare(b.id); });
var link = g.selectAll(".link")
.data(tree(root).descendants().slice(1))
.enter().append("path")
.attr("class", "link")
.attr("d", function(d) {
return "M" + d.y + "," + d.x
+ "C" + (d.y + d.parent.y)/2 + "," + d.x
+ " " + (d.y + d.parent.y)/2 + "," + d.parent.x
+ " " + d.parent.y + "," + d.parent.x;
});
var node = g.selectAll(".node")
.data(root.descendants())
.enter().append("g")
.attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf"); })
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
node.append("text")
.attr("dy", 3)
.attr("x", function(d) { return d.children ? -8 : 8; })
.style("text-anchor", function(d) { return d.children ? "end" : "start"; })
.text(function(d) { return d.id.substring(d.id.lastIndexOf(".") + 1); });
node.append("circle")
.attr("r", 3.5)
.style("fill", function(d) { return color(Sc.value) });
});
</script>
答
你必须使用d.data.sc
:
node.append("circle")
.attr("r", 3.5)
.style("fill", function(d) { return color(d.data.sc) });
感谢您的回答。 – Alex
但它似乎没有区别。我希望该值成为我的第二列(sc)中的值 – Alex
是否必须在stratify()部分中定义该值? – Alex