使用存储在d3.js中的数组中的数据绘制d3.svg.arc元素

drawing d3.svg.arc element using data stored in array in d3.js

本文关键字：d3 绘制 svg arc 元素 数据 数组 存储 js      更新时间：2023-09-26

嗨，我正在尝试绘制多个舵手图。代码绘制了一个这样的图表。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");
      });
相关文章：