使用D3選擇特定的SVG對象

Question

我在d3制作的SVG對象上有一個多邊形。 單擊時，將打開帶有兩個按鈕的“引導彈出窗口”。 我希望能夠單擊鏈接並轉換多邊形（最終目標是在多邊形頂部繪制一個圓）。 目前，主要問題是我無法選擇多邊形並更改其屬性。 這是我的代碼：

  // create an svg element and append it
  canvas = d3.select("#map")
    .append("svg")
      .attr("width", 500)
      .attr("height", 500)
      .attr("id", "firstFloor");

  // draw polygon
  var coverageAreaIDA1 = 'roomA1';
  var content = '<button id="view" class="btn btn-sm btn-primary view-cam-btn">View Camera</button> <button id="set" class="btn btn-sm btn-primary set-dest-btn">Set Destination</button> <input type="hidden" name="coverage-area-id" value="'+coverageAreaIDA1+'">';
  var polygonA1 = [[65, 215], [65, 250], [140, 250], [140, 215]];
  var roomA1 = canvas.append("polygon")
    .attr("points", polygonA1)
    .attr("class", "coverage-area")
    .attr("id", coverageAreaIDA1)
    .attr("data-toggle", "popover")
    .attr('data-placement', 'top')
    .attr("data-content", content)
    .attr("tabindex", "0")
    .attr("data-trigger", "focus");

我嘗試了很多方法，到目前為止，最接近的方法是在彈出窗口上選擇帶有其值的按鈕（與多邊形ID相同），將其放入var中，然后使用d3選擇多邊形，例如下面的代碼。

function badGuy() {
  $(document).on('click', '.view-cam-btn', function(){
    var coverageAreaID = $(this).nextAll('input').eq(0).val();
    var selection = canvas.select("#" + coverageAreaID).styles("fill", "purple");
    console.log('Selected polygon has ID '+selection.attrs('id'));
    });
}

我知道'selection'不為空或為null，因為當我測試其真實性時，它會返回true，但是上述console.log返回“ Selected多邊形的ID為[object Object]” ，並且不會更改多邊形的樣式。

PS：如果您想知道為什么我為什么要使用attrs而不是attr以及使用styles而不是style，通過查看StackOverflow上的許多問題/答案，我認為我應該添加此庫

<script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script>

並使用attrs和樣式。 在此之前，console.log沒有返回任何內容。

編輯：完整代碼： https ： //codepen.io/navidfalla/pen/xrpzXE

Answer 1

感謝代碼。好吧，我做了一些修改，請嘗試看看這是否是您想要的：

1-請將您的createPopover方法更改為：

function createPopover(roomId) {
     var content = '<button id="view" data-room-id="'+roomId+'" class="btn btn-sm btn-primary view-cam-btn">View Camera</button>'+
                   '<button id="set" data-room-id="'+roomId+'" class="btn btn-sm btn-primary set-dest-btn">Set Destination</button> ';
     return content;
}

這使您可以通過data-room-id或$（selector）.data（'roomId'）輕松獲得單擊的多邊形的ID。

2-請將“設置目標”按鈕上的click事件處理程序更改為：

$(document).on('click', '.set-dest-btn', function(){
    //var coverageAreaID = $(this).nextAll('input').eq(0).val();
    //console.log('set dest button has parent ID: '+coverageAreaID);

    var roomId = $(this).data('roomId'); 
    var polygon = d3.select('polygon#'+roomId);
    // do you stuff here with polygon
    polygon.style('fill','white'); 
  });

如您所見，您現在可以訪問多邊形。

為了更好地理解您的代碼，我不得不對其進行一些清理，您可以看看是否喜歡它。 而不是那樣創建房間，而是創建了一個房間創建方法：

function createRoom(number,polygon){
  var roomId = 'room'+number;
  var content = createPopover(roomId); 
  var room  = canvas.append("polygon")
    .attr("points", polygon)
    .attr("class", "coverage-area")
    .attr("id", roomId)
    .attr("data-toggle", "popover")
    .attr('data-placement', 'top')
    .attr("data-content", content)
    .attr("tabindex", "0")
    .attr("data-trigger", "focus");
    return room;
} 

然后以這種方式創建房間：

// draw polygon over stairwell
  var roomA1 = createRoom('A1',[[65, 215], [65, 250], [140, 250], [140, 215]]);
  var roomA2 = createRoom('A2',[[140, 215], [140, 278], [230, 278], [230, 215]]);
  var roomA3 = createRoom('A3',[[230, 215], [230, 278], [320, 278], [320, 215]]);
  var roomA4 = createRoom('A4',[[320, 215], [320, 278], [400, 278], [400, 215]]);
  var roomA5 = createRoom('A5',[[65, 250], [65, 278], [140, 278], [140, 250]]);
  var roomA6 = createRoom('A6',[[42, 215], [42, 278], [65, 278], [65, 215]]);
  var roomA7 = createRoom('A7',[[332, 120], [332, 215], [355, 215], [355, 120]]);
  var roomA8 = createRoom('A8',[[302, 120], [302, 215], [332, 215], [332, 120]]); 
  var roomA9 = createRoom('A9',[[302, 99], [302, 120], [355, 120], [355, 99]]);
  var roomA9 = createRoom('A10',[[408, 215], [408, 278], [462, 278], [462, 215]]);

請嘗試一下，看看這是您要找的東西還是我誤解了:)

希望能幫助到你