d3を使用して特定のsvgオブジェクトを選択する

Question

d3によって作成されたSVGオブジェクトにポリゴンがあります。クリックすると、2つのボタンがある「ブートストラップポップオーバー」が開きます。リンクをクリックしてポリゴンを変換できるようにしたい（究極の目標はポリゴンの上に円を描くことです）。今のところ、主な問題はポリゴンを選択してその属性を変更できないということです。ここ は私のコードです：

// 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と同じである）、その値をポップオーバーのボタンを選択している、多くの方法を試してみました以下のコードのように、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')); 
    }); 
} 

は私がそのtruthinessをテストするとき、それはtrueを返しますので、「選択」が空またはnullでないことを知っているが、上記にconsole.logはを返し「を選択したポリゴンはID [オブジェクトのオブジェクト]を持っている」としませんポリゴンのスタイルを変更します。

はPS：私はStackOverflowの上の多くの質問/回答を見ることで、代わりにATTRのattrsにし、代わりにスタイルのスタイルを使用していますなぜあなたは迷っているならば、私はこのライブラリ

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

これは、簡単にデータルーム-IDまたは$（セレクタ）.dataセクション（ 'roomId'）でクリックされたポリゴンのIDを取得することができます。

2 - に設定された目的地ボタンであなたのクリックイベントハンドラを変更してください：あなたは、多角形へのアクセスを今持っている見ることができるよう

$(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]]); 

これを試してみて、これはあなたが探しているか、いたものであるかどうかを確認してください私は

:)それは私があなたを助けることができますが、あなたのHTMLと完全なJSのコードを提供することができれば理解されるだろうと思う