在D3中选择SVG

Question

我有一点可视化去哪里有矩形对。每一对共享相同的id属性。所以目前，我已经设置好了，所以如果我把鼠标悬停在任何一个上，都会改变颜色。这很好，但是，正如我所做的那样，我需要一个新的select（“svg #whatever）”命令，这是不对的。 ，这将是元素的ID，我将鼠标悬停，然后把那个在矿井SELCT命令，像这样

svg.selectAll("rect") 
.on("mouseover", function(d) { 

var thisid = d3.select(this).attr("id") 

    svg.selectAll("svg #"+thisid+)    
    .attr("fill", "red") 

除了不工作难道仅仅是语法 - 即我已经得到了+ +错误 - 或者我在这里犯了一个根本性的错误？

Answer 1

你的想法很好，但正如Robert Longson指出的，你不能用id来链接两个相关的对象， id必须是唯一的整个网页。

你可以，但是，添加任何你想你的数据元素（除了id等），最好用启动"data-"属性名称属性，然后用CSS attribute selector找到具有相同属性的其他元素。就像这样：

//when you create the rectangles: 
rect.attr("data-id", function(d) { 
        return d.id;/* or however you figure out this id */ 
      }); 


//Your event handler 
svg.selectAll("rect") 
    .on("mouseover", function(d) { 

     var thisid = d3.select(this).attr("data-id") 

     svg.selectAll("svg rect[data-id='" + thisid + "']") 
       //note the single quotes inside double quotes 
       //the final selector should look like "svg rect[data-id='23']" 
      .attr("fill", "red"); 

    }); 

唯一的缺点是，像他们与类名和IDS做的浏览器不索引以便快速访问所有属性，所以它可能是缓慢的，如果你有大量的矩形和鼠标悬停的他们迅速。使用课程可以使选择更快，但如果您有多个课程，则会增加复杂性 - 您无法通过致电.attr("class")访问您感兴趣的一个课程价值。但是，您可以重新访问您正在使用的数据变量来首先定义data-id。像这样：

//when you create the rectangles: 
rect.attr("data-id", function(d) { 
        return "data-rectangle " + /* any other classes you are adding, + */ 
         "data-id-" + d.id;/* or however you figure out this id */ 
      }); 


//Your event handler 
svg.selectAll("rect") 
    .on("mouseover", function(d) { 

     var thisid = d.id; /* or however you figure out this id */ 
     //d3 automatically passed the element's data object to your event handler 

     svg.selectAll("svg rect.data-id-" + thisid) 
       //the final selector should look like "svg rect.data-id-23" 
      .attr("fill", "red"); 

    });