Question

我在d3制作的SVG对象上有一个多边形。点击后，＆＃39; bootstrap popover＆＃39;打开两个按钮。我希望能够点击链接并变换多边形（最终目标是在多边形顶部绘制一个圆）。目前，主要问题是我无法选择多边形并更改其属性。这是我的代码：

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

我知道＆＃39;选择＆＃39;不是空或null，因为当我测试它的真实性时它返回true，但上面的console.log返回＆＃34;所选多边形有ID [object Object]＆＃34; 并且不会更改多边形＆＃39;风格。

PS：如果您想知道为什么我使用attrs而不是attr和样式而不是样式，通过查看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 - 请将“设置目标”按钮上的点击事件处理程序更改为：

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

请尝试这个，看看这是你正在寻找的还是我误解了：）

希望有所帮助

使用d3选择特定的svg对象

1 个答案: