在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"); 

    });