我正在使用for循环动态创建包布局的数据。 我想圆圈的颜色是随机的。 我的代码返回fill属性的实际函数:
<circle cx="532.0508075688773" cy="219.6152422706632" r="46.41016151377546" fill="function () {
return "hsl(" + Math.random() * 360 +",100%,50%)"
}" name="1"></circle>
如何更改我的代码,以便返回传递给fill属性的函数?
数据如何用于创建根节点的相关部分
...
for (var j=0;j<10;j++){
child = {};
child["name"]= +j;
child["value"]=2;
child["fill"]=function() {
return "hsl(" + Math.random() * 360 + ",100%,50%)";
};
...
这是我创建圆圈的方式
d3.select('svg g')
.selectAll('circle')
.data(rootNode.descendants())
.enter()
.append('circle')
...
.attr('fill', function(d) { return d.data.fill; })
答案 0 :(得分:4)
而不是将函数设置为节点的基准...
child["fill"] = function() {
return "hsl(" + Math.random() * 360 + ", 100%, 50%)";
};
...只需设置值本身:
child["fill"] = "hsl(" + Math.random() * 360 + ", 100%, 50%)";
这是一个遵循相同原则的基本演示:
var svg = d3.select("svg")
var data = [{
name: "foo",
fill: "hsl(" + Math.random() * 360 + ",100%,50%)"
}, {
name: "bar",
fill: "hsl(" + Math.random() * 360 + ",100%,50%)"
}, {
name: "baz",
fill: "hsl(" + Math.random() * 360 + ",100%,50%)"
}];
var circles = svg.selectAll(null)
.data(data)
.enter()
.append("circle")
.attr("cy", 50)
.attr("r", 40)
.attr("cx", function(_, i) {
return 50 + 100 * i
})
.style("fill", function(d) {
return d.fill
})
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>
但是,我会说数据中的存储函数(Math.random()
是一个函数)并不是一种好的(或标准的)实践。
而不是那样,为什么不自己存储亮度和饱和度?然后,您可以直接在回调中使用Math.random()
:
.style("fill", function(d) {
return "hsl(" + Math.random() * 360 + "," + d.saturation + "," + d.lightness + ")"
})
以下是演示:
var svg = d3.select("svg")
var data = [{
name: "foo",
saturation: "100%",
lightness: "50%"
}, {
name: "bar",
saturation: "40%",
lightness: "30%"
}, {
name: "baz",
saturation: "100%",
lightness: "80%"
}];
var circles = svg.selectAll(null)
.data(data)
.enter()
.append("circle")
.attr("cy", 50)
.attr("r", 20)
.attr("cx", function(_, i) {
return 50 + 50 * i
})
.style("fill", function(d) {
return "hsl(" + Math.random() * 360 + "," + d.saturation + "," + d.lightness + ")"
})
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>