1

d3js からバブル チャートを作成していますがTypeError: undefined is not a function、enter()メソッドで を受け取り続けています。私はほぼすべてを試しましたが、フィルターメソッドがnullを返しているという事実以外に、このエラーが発生する理由を特定できません。現在、バブル チャート自体は表示されません。

    var diameter = 310,
      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("bubble")
      .append("svg")
      .attr("width", diameter)
      .attr("height", diameter)
      .attr("class", "bubble");


    var node = svg.selectAll(".node")
      .data(bubble.nodes({children: [{packageName: "food", className: "food", value: 100}]}))
      .filter(function(d) { return !d.children; })
      // ================================
      // This is causing the error below
      // ================================
      .enter()
      .append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

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

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

    node.append("text")
      .attr("dy", ".3em")
      .style("text-anchor", "middle")
      .text(function(d) { return d.className.substring(0, d.r / 3); });

    d3.select(self.frameElement).style("height", diameter + "px");

JsFiddle: http://jsfiddle.net/26Tra/

4

1 に答える 1

2

データバインディングでは、関数によって生成されたpackageNameやなどのキーを使用していますが、コードにはありません。私はそれを追加しましたが、今あなたのデータバインディングは正しいです:classNameclasses

var node = svg.selectAll(".node")
    .data(bubble.nodes(classes(root)).filter(function (d) {return !d.children;}))
  .enter()
    ...

注: 私はいくつかの非常に単純なデータをモックしたためpackageName、果物を1 つだけ使用して、色付けのclassName代わりに使用しました。packageNameまた、色のカテゴリを に変更して、category10()コントラストを高めました。

完全な FIDDLE。

于 2014-05-24T09:44:01.860 に答える