Question

以下代码不会显示任何图表jsbin link

data1 = [
{
values :
[
  {"label":"One","value":29.765957771107},
  {"label":"Two","value":0},
  {"label":"Three","value":32.807804682612}
]
  }
];

nv.addGraph(function () 
            {
              var chart = nv.models.pieChart()
                .x(function (d) { return d.label; })
                .y(function (d) { return d.value; })
                .donut(true)
                .donutLabelsOutside(false)
                .showLegend(true)
              .showLabels(true);


    d3.select("#chart svg")
.datum([{"label":"One","value":29.765957771107},{"label":"Two","value":0.0},{"label":"Three","value":32.807804682612}])
        .transition().duration(100)
        .call(chart);

        return chart;
    });

就好像我更改了Jsbin Link下面的绑定一样。

但我想通过html帮助扩展来绑定服务器端的数据。 将对象传递给d3的正确格式是什么？ 任何想法？

      d3.select("#chart svg")
.datum(data1)
.transition().duration(2200)
.call(chart);

Answer 1

与大多数问题的评论一样，我发现用data1替换内联数据可以使其正常工作。

data1 = [
{
values :
[
  {"label":"One","value":29.765957771107},
  {"label":"Two","value":0},
  {"label":"Three","value":32.807804682612}
]
  }
];

nv.addGraph(function () 
            {
              var chart = nv.models.pieChart()
                .x(function (d) { return d.label; })
                .y(function (d) { return d.value; })
                .donut(true)
                .donutLabelsOutside(false)
                .showLegend(true)
              .showLabels(true);


    d3.select("#chart svg")
.datum(data1)
        .transition().duration(100)
        .call(chart);

        return chart;
    });

不确定为什么你有一个变量来存储你的值，然后把它们放在内联中，但它们显然是不一样的。

nvd3需要一组散列配置选项，其中一个是values:。你仍然必须遵循这个结构。

这有效：

.datum([{values:[{"label":"One","value":29.765957771107},{"label":"Two","value":0.0},{"label":"Three","value":32.807804682612}]}])

我所做的就是[what you had]并将其[{values:[what you had]}]

甜甜圈饼图NVD3

1 个答案: