Question

我对d3和javascript很陌生。我正在尝试使用来自csv文件的数据创建一个饼图。将通过多个SQL查询创建多个csv文件，并且标头未知。

我正在使用此示例http://www.tutorialsteacher.com/d3js/create-pie-chart-using-d3js用下面的csv文件创建饼图。

browser,percent
Chrome,73.70
IE/Edge,4.90
Firefox,15.40

但是我的csv文件将具有动态值。我可以使用

检索动态标头详细信息

var mappedArray = d3.entries(data[0]);
key1 = mappedArray[0].key;
key2 = mappedArray[1].key;

但是我无法在以下代码中应用检索到的键值。以下是使用已知标头值的示例代码。

arc.append("text")
   .attr("transform", function (d) {
                   return "translate(" + label.centroid(d) + ")";
               })
               .text(function (d) { return d.data.browser; });

arc.append("text")
   .attr("transform", function (d) {
                   return "translate(" + label1.centroid(d) + ")";
               })
               .text(function (d) { return d.data.percent; });

在上面的代码中，浏览器和百分比是标头值/键，我已修改这些标头值/键，以支持使用我使用d3.entries检索到的键的动态标头值。

arc.append("text")
               .attr("transform", function (d) {
                   return "translate(" + label.centroid(d) + ")";
               })
               .text(function (d) { return d.data.key1 ; });

arc.append("text")
               .attr("transform", function (d) {
                   return "translate(" + label1.centroid(d) + ")";
               })
               .text(function (d) { return d.data.key2 ; });

但这不起作用。有人请帮我解决这个问题，因为我在网上找不到任何这样的可行示例？

D3饼图使用带有未知标题的csv文件

0 个答案: