未捕获的TypeError:d3.pack(...).sort不是一个函数 [英] Uncaught TypeError: d3.pack(...).sort is not a function

问题描述

我是Java和D3.js的新手，我目前正在尝试使用此处提供的示例在d3.js中构建气泡图

I am new to Javascript and D3.js and I am currently trying to build a bubble chart in d3.js using an example provided here https://jrue.github.io/coding/2014/exercises/basicbubblepackchart/ and modifying it according to my assignment. I know that the example above was written in a previous version of d3, and I am using version v4 where syntax has slightly changed,however I am getting a following error when running a program:

未捕获的TypeError:d3.pack(...).sort不是函数

var diameter = 500, //max size of the bubbles
color    = d3.scaleOrdinal(d3.schemeCategory10); //color category

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

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

d3.csv("teams.csv", function(error, data){

data = data.map(function(d){ d.value = +d["Amount"]; return d; });

var nodes = bubble.nodes({children:data}).filter(function(d) { return !d.children; });

//setup the chart
var bubbles = svg.append("g")
    .attr("transform", "translate(0,0)")
    .selectAll(".bubble")
    .data(nodes)
    .enter();

bubbles.append("circle")
    .attr("r", function(d){ return d.r; })
    .attr("cx", function(d){ return d.x; })
    .attr("cy", function(d){ return d.y; })
    .style("fill", function(d) { return color(d.value); });

bubbles.append("text")
    .attr("x", function(d){ return d.x; })
    .attr("y", function(d){ return d.y + 5; })
    .attr("text-anchor", "middle")
    .text(function(d){ return d["Team"]; })
    .style({
        "fill":"black", 
        "font-family":"Helvetica Neue, Helvetica, Arial, san-serif",
        "font-size": "12px"
    });

这是什么问题?

推荐答案

请确保使用与示例中的作者相同的d3版本(从语法上看您还不错).另外，它是"d3.layout.pack().sort(null)":)

Be sure to use the same version of d3 as the author in the example (it looks like you're good by the syntax). Also, it's 'd3.layout.pack().sort(null)' :)

这篇关于未捕获的TypeError:d3.pack(...).sort不是一个函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！