Question

我正在使用D3 v4中的包布局，并希望在我的csv，“基金”和“花费”中的两个值之间切换圆圈大小。

这可以缩放圈子：

rank(funds)
rank(spend)

然而，on.click事件不会缩放圈子

d3.select("#funds")
 .on("click", function () {
   return rank(funds);
});

这是带数据的plunker

https://plnkr.co/edit/vp3MuQZEU85cNI1KUlc5?p=info

var diameter = 400

var color = d3.scaleOrdinal()
    .range(["#ff433d", "#ff8e8b", "#ffc6c4", "#5c42ab", "#9d8ecd", "#cec6e6"])

var pack = d3.pack()
  .size([diameter, diameter])
  .padding(1.5)

var vis = d3.select("#svgid").append("svg")
  .attr("width", diameter)
  .attr("height", diameter)
  .attr("class", "pack")
  .append("g");

//DRAW CHART

d3.csv("bil-rupeex.csv", function(data) {

  var root = { name: "decade", children: data };
    
//UPDATE DATA

    funds = d3.hierarchy(root)
      .sum(function(d) { return d.funds })
      
    spend = d3.hierarchy(root)
      .sum(function(d) { return d.spend })

    function rank(data) {    
    
    pack(data);

    var node = vis.selectAll("circle")
      .data(data.descendants())
      .enter().append("circle")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
      .attr("r", function(d) { return d.r; })
      .attr("fill", function(d) {
        return color(d.data.scam);
      })
   
    node.exit().remove();

  }
 
  rank(funds);
  

//BUTTONS

  d3.select("#funds")
    .on("click", function () {
      return rank(funds);
    });

  d3.select("#spend")
    .on("click", function () {
      return rank(spend);
    });
  
  
})

Answer 1

尝试删除点击处理程序中的所有圈子并实际调用排名功能，而不是仅仅返回对它的引用。

var diameter = 400

var color = d3.scaleOrdinal()
    .range(["#ff433d", "#ff8e8b", "#ffc6c4", "#5c42ab", "#9d8ecd", "#cec6e6"])

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

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

//DRAW CHART

d3.csv("bil-rupeex.csv", function(data) {

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

//UPDATE DATA

    funds = d3.hierarchy(root)
      .sum(function(d) { return d.funds })

    spend = d3.hierarchy(root)
      .sum(function(d) { return d.spend })

    function rank(data) {    

    pack(data);

    var node = vis.selectAll("circle")
      .data(data.descendants())
      .enter().append("circle")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
      .attr("r", function(d) { return d.r; })
      .attr("fill", function(d) {
        return color(d.data.scam);
      })

    node.exit().remove();

  }

  rank(funds);
  rank(spend);


//BUTTONS

  d3.select("#funds")
    .on("click", function () {

      vis.selectAll("circle").remove()


       rank(funds);
       console.log("funds")

    });

  d3.select("#spend")
    .on("click", function () {

      vis.selectAll("circle").remove()
      rank(spend); 


    });


})

Forked plunkr：https://plnkr.co/edit/ky23JGZciJAA4LUK12If?p=preview

如何使用D3中的on.click事件更新数据

1 个答案: