文章/答案/技术大牛

发布

社区首页 >问答首页 >D3 -无法从csv获得打包的圆圈

问D3 -无法从csv获得打包的圆圈
EN

Stack Overflow用户

提问于 2014-05-03 17:04:22

回答 1查看 1.6K关注 0票数 1

我无法让这个看似简单的代码起作用。我有一个包含5行数据的csv文件，并试图用它创建一个气泡图！真的很感激有人能帮忙！

<body>
    <script type="text/javascript">


var diameter = 960,
format = d3.format(",d"),
color = d3.scale.category20c();

var bubble = d3.layout.pack()
.sort(null)
.size([diameter, diameter])
.padding(1.5);

        var svg = d3.select("#svgid")
                    .append("svg")
                    .attr("width", diameter)
                    .attr("height", diameter)
                    .attr("class","bubble");


        //Data
        //var dataset = [ 5, 10, 15, 20, 25 ];
        d3.text("http://bpgpuae.com/bil-rupeex.csv", function(csvData) {

            var dataset = d3.csv.parse(csvData);

var node = svg.selectAll(".node")
.data(bubble.nodes(dataset))
.enter().append("g")
  .attr("class", "node");
  .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

  node.append("title")
  .text(function(d) { return d.scam + ": " + format(d.funds); });

  node.append("circle")
  .attr("r", function(d) { return d.funds; })
  .style("fill", function(d) { return color(d.decade); });
});


    </script>
</body>

这是csv文件：

decade,scam,funds
2010s,NSEL  scam,55
2010s,Railway Iron-Ore freight scam,170
2010s,Vodafone tax scam,110
2010s,Odisha Mining scam,600
2010s,DIAL Scam,1670
2010s,Tamil Nadu Granite scam,160

circle-pack

javascript

csv

d3.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-05-03 21:39:27

包布局需要一个分层数据结构。因此，您必须准备相应的单位CSV数据。

var data = { name: "decade", children: csvData };

var node = vis.data([data]).selectAll("circle")
    .data(pack.nodes)
    ...

这里是一个工作的扑通与您的数据和您的大部分原始逻辑。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/23447398

复制

相似问题

问D3 -无法从csv获得打包的圆圈
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问D3 -无法从csv获得打包的圆圈EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问D3 -无法从csv获得打包的圆圈
EN