在d3中的mousedown上更改數據集

Question

我已經從一個數據集中創建了一個條形圖。 我還創建了一個我想充當按鈕的圓形對象。 在圓上單擊鼠標時，我想更改用於條形圖的數據集，然后重新繪制圖形。 我嘗試將mousedown處理程序添加為一個函數，但是單擊時數據集不會更改。 這是矩形的原始selectAll：

 svg.selectAll("rect")
         .data(data)
         .enter() 
         .append("rect")
         .attr("x", function(d, i) {
             return i * (width / data.length);})
         .attr("y", function(d) { 
             return 100 - d ;})
         .attr("width", function(d,i) {
              return barWidth ;})
         .attr("height", function(d) {
            return 150 - (100 - d);
         });

這是我在下面繪制的圓（我想成為一個切換按鈕）：

  svg.append("circle")
        .attr("cx", 525)
        .attr("cy", 275)
        .attr("r", 45)
        .attr("stroke", "white")
        .attr("fill", "#660066")
        .attr("opacity", "0.7")
        .on("mouseover", function(){d3.select(this)
            .style("opacity", "1");
          })
        .on("mouseout", function(){d3.select(this)
            .style("opacity", "0.7");
          })
        .on("mousedown", function() {
          // handle event here
        });

我嘗試將svg.selectAll（“ rect”）直接復制到mousedown函數中，然后將數據重新綁定到其他預定義的數據集。 我也嘗試過重新定義.on“ mousedown”函數中的數據集，但條形圖仍然不會重繪。 將mousedown拆分為一個我在svg.append（“ circle”）之外調用的單獨函數也不起作用。 我的猜測是問題是我試圖通過處理另一個事件來更改一個繪制對象，但是我覺得必須有某種方法可以解決此問題。 任何意見是極大的贊賞。

Answer 1

如果您顯示確切的問題或jsfiddle工作，我可能會嘗試查找問題

結構和流程必須是這樣的

兩個SVG circle和bar graph

兩種功能

function drawgraph(var dataset)
{
//draw graph with this dataset
}

 function drawcircle()
{
//using `d3.js` draw circle
// and in .mousedown call the drawgraph(dataset)
}

方法很簡單

分開 svg和代碼也不要將兩者結合在一起 。

Answer 2

該代碼必須與此類似。

var rects = svg.selectAll("rect")
               .data(data)
               .enter() 
               .append("rect")
               .attr("x", function(d, i) {
                  return i * (width / data.length);})
               .attr("y", function(d) { 
                  return 100 - d ;})
               .attr("width", function(d,i) {
                  return barWidth ;})
               .attr("height", function(d) {
                  return 150 - (100 - d);
            });

svg.append("circle")
    .attr("cx", 525)
    .attr("cy", 275)
    .attr("r", 45)
    .attr("stroke", "white")
    .attr("fill", "#660066")
    .attr("opacity", "0.7")
    .on("mouseover", function(){d3.select(this)
        .style("opacity", "1");
      })
    .on("mouseout", function(){d3.select(this)
        .style("opacity", "0.7");
      })    
    .on("click", function() {
        rects.data(newdata)
             .enter() 
             .attr("x", function(d, i) {
                 return i * (width / data.length);})
             .attr("y", function(d) { 
                 return 100 - d ;})
             .attr("width", function(d,i) {
                 return barWidth ;})
             .attr("height", function(d) {
                 return 150 - (100 - d);
             });
      });