![](/img/trans.png)
[英]d3.js draw line source and target is different (from an arc generated by d3.svg.arc() to the nodes with Cardinal position)
[英]drawing d3.svg.arc element using data stored in array in d3.js
嗨,我正在尝试多个绘制coxcomb图表 。 代码绘制了一个这样的图表。 jsfiddle的例子
我遇到的问题是:我如何订购我的数据,以便它允许我绘制多个这样的图表?
//data
var data = [
{"label": "January", "value": 150, "time": 1},
{"label": "February", "value": 65, "time": 2},
{"label": "March", "value": 50, "time": 3},
{"label": "April", "value": 75, "time": 4},
{"label": "May", "value": 150, "time": 5},
{"label": "June", "value": 65, "time": 6}
];
//container
var svg = d3.select("body")
.append("svg:svg")
.attr("width", 1000)
.attr("height", 1000);
var pi = Math.PI;
var arc = d3.svg.arc()
.innerRadius(0)
.outerRadius(function(d,i) {return (0 + d.value); })
.startAngle(function(d,i) { return ((d.time - 1) * 60 * pi / 180); })
.endAngle(function(d) { return (d.time * 60 * pi / 180 ); });
var chartContainer = svg.append("g")
.attr('class', 'some_class')
.attr("transform", "translate(450, 300)");
chartContainer.selectAll("path")
.data(data)
.enter()
.append("path")
.attr("d", arc)
.attr("class", "arc");
我想也许我可以用以下方式订购数据:
var data2 = [
{label: "Rose.chart1", value: [150,65,50,75,150,65]}
{label: "Rose.chart2", value: [130,50,30,10,50,70]}
]
但这意味着我将不得不重写以下内容:
1.)定义弧变量
var arc = d3.svg.arc()
.innerRadius(0)
.outerRadius(function(d,i) {return (0 + d.value); })
.startAngle(function(d,i) { return ((d.time - 1) * 60 * pi / 180); })
.endAngle(function(d) { return (d.time * 60 * pi / 180 ); });
2.)将数据绑定到选择
chartContainer.selectAll("path")
.data(data)
.enter()
.append("path")
.attr("d", arc)
.attr("class", "arc");
我想我可能需要输入数据对象(data2),并再次输入value元素。 原谅我的描述。
function(d.value) {???}
首先将数据嵌套为数组数组。 所以你会有:
//data
var data = [
[
{"label": "January", "value": 150, "time": 1},
{"label": "February", "value": 65, "time": 2},
{"label": "March", "value": 50, "time": 3},
{"label": "April", "value": 75, "time": 4},
{"label": "May", "value": 150, "time": 5},
{"label": "June", "value": 65, "time": 6}
],
[
{"label": "January", "value": 123, "time": 1},
{"label": "February", "value": 62345, "time": 2},
{"label": "March", "value": 5340, "time": 3},
{"label": "April", "value": 72315, "time": 4},
{"label": "May", "value": 11350, "time": 5},
{"label": "June", "value": 6135, "time": 6}
],
];
然后将图表嵌套在绑定到数据的父容器中:
svg.selectAll(".charts")
.data(data)
.enter()
.append("g")
// Translate each chart based on 'i'
.attr("transform", function(d, i) { return "translate(" + ((i+1) * 450) + ", 300)");
.each(function(chartData, i) {
var chartContainer = d3.select(this);// Selects the containing 'g'
// The rest is what you already wrote
chartContainer.selectAll("path")
.data(data)
.enter()
.append("path")
.attr("d", arc)
.attr("class", "arc");
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.