Javascript 在d3中鼠标向下移动时更改数据集

我已经从一个数据集创建了一个条形图。我还创建了一个圆形对象，我想作为一个按钮。在圆圈中鼠标向下移动时，我想更改用于条形图的数据集，然后重新绘制图形。我已经尝试将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.selectAll（“rect”）复制到mousedown函数中，并将数据重新绑定到不同的预定义数据集。我还尝试在.on“mousedown”函数中重新定义该数据集，但条形图仍然没有重新绘制。将mousedown分离成一个单独的函数，我在svg.append（“circle”）外部调用该函数也不起作用。我猜问题是我试图通过处理另一个事件来改变一个绘图对象，但我觉得一定有办法解决这个问题。非常感谢您的任何建议。

如果您展示您的确切问题或

jsfiddle

工作，我可能会尝试找到问题所在

结构和流程必须是这样的

两个SVG

圆圈

和条形图

两种功能

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

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

方法很简单

---

分离svg和代码不要将两者结合起来。

代码必须与此类似

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);
             });
      });

---

您没有向我们展示您遇到问题的实际代码。如果旧数据集和新数据集的大小相同，请记住enter选择将为空，仅复制代码将完全无效。您可能想要处理更新选择。谢谢，当我将drawgraph放入函数中时，它可以工作，但是当页面第一次加载时，如何使用初始数据集调用函数？没关系，我已经解决了。在我所有的函数定义下面，我只需要添加一个函数调用：drawGraph（）；

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);
             });
      });