1

嗨，我正在尝试多次绘制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.) 定义 arc 变量

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），然后再次输入值元素。原谅我的描述。

function(d.value) {???}
4

1 回答 1

4

首先将数据嵌套为数组数组。所以你会有：

//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");
      });
于 2013-02-20T05:56:53.973 回答