0

下面的代码不显示任何图表我的jsbin 链接

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);
4

1 回答 1

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]}]

于 2013-06-20T20:25:47.343 回答