如何使用 d3js select 多个 svg 元素

Question

如何使用鼠标右键和 CRTL 键 select 多个 SVG 元素？

我想要的和我找到的this example类似（右边的部分）。可以 select 仅一个元素，或者通过按住 CTRL 键，多个元素。

我查看了代码，但无法在我的案例中重现。

我的情况： JSFIDDLE

我希望我有更多的圈子 select。我希望当用户 select 是一个圆圈时，打印所选圆圈的 id 。当用户完成 select 他想要的内容并按下 Finish 按钮时，我想打印 select 编辑的项目列表。

这能做到吗？非常感谢任何帮助。

更新

我修改了@Shashank 的代码，现在可以了。我希望它对某人有用:)

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
    <script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
</head>

<body>

    <div id="circles">
        <svg>
            <circle id="first" cx="10" cy="10" r="10" fill="purple" />
            <circle id="second" cx="60" cy="60" r="5" fill="red" />
            <circle id="third" cx="110" cy="110" r="15" fill="orange" />
            <circle id="fourth" cx="90" cy="50" r="7" fill="yellow" />
        </svg>
    </div>

  <button type="button" id="finalSelection">Finish</button>

  <span style="display:block;margin-top: 10px;">Selected IDs: <span class="values"></span></span>
  <script src="script.js"></script>
</body>

</html>

script.js

var selectedIds = [];

d3.selectAll('#circles svg circle').on('click', function() {
    // fetch ID
    var id = d3.select(this).attr('id');

    // toggle "clicked" class and push/splice id within the selectedIds array accordingly based on event.metaKey (CTRL)
    if(d3.select(this).classed('clicked')) { // classed add/remove a CSS class from the selection
        d3.select(this).classed('clicked', false).style('stroke', null);
        selectedIds.splice(selectedIds.indexOf(id), 1); // the splice() method adds/removes items to/from an array, and returns the removed item(s)
    } 
    else { // if an item has never been selected
        if(selectedIds.length) { // if the array selectedIds is not empty
            if(d3.event.ctrlKey) { // if CTRL is pressed
                d3.select(this).classed('clicked', true).style('stroke', 'blue');
                selectedIds.push(id); 
            }
            else { // *** OK *** if the item I'm selecting has never been selected and before I had already selected other elements
                // I "remove" all those already selected
                d3.selectAll(".clicked").classed('clicked', false).style('stroke', null);
                selectedIds = [];
                // I consider selected the one actually selected
                d3.select(this).classed('clicked', true).style('stroke', 'blue');
                selectedIds.push(id); 
            }
        } 
        else { // if the array selectedIds is empty
            d3.select(this).classed('clicked', true).style('stroke', 'blue');
            selectedIds.push(id);
        }
    }

    $('span.values').html(selectedIds.join(', '));
});

$('button#finalSelection').click(function() {
    $('span.values').html(selectedIds.join(', '));
    console.log("compare!")
});

style.css

span.values {
  color: #428bca;
}

JSFIDDLE 使用更新后的代码。

Answer 1

是的，当然可以。您确定它应该是 鼠标右键单击 和 CTRL 吗？

这是一个片段：

var selectedIds = [];

d3.selectAll('#circles svg circle').on('contextmenu', function() {
 // prevent default right click functionality
 d3.event.preventDefault();
  
  // fetch ID
 var id = d3.select(this).attr('id');
  
  // toggle "clicked" class and push/splice id within the selectedIds array accordingly based on event.ctrlKey (CTRL)
 if(d3.select(this).classed('clicked')) {
   if(selectedIds.length > 1) {
     if(d3.event.ctrlKey) {
     d3.select(this).classed('clicked', false).style('stroke', null);
      selectedIds.splice(selectedIds.indexOf(id), 1);
      }
    } else {
    d3.select(this).classed('clicked', false).style('stroke', null);
     selectedIds.splice(selectedIds.indexOf(id), 1);    
    }  
  } else {
   if(selectedIds.length) {
     if(d3.event.ctrlKey) {
     d3.select(this).classed('clicked', true).style('stroke', '#000');
      selectedIds.push(id); 
      }
    } else {
    d3.select(this).classed('clicked', true).style('stroke', '#000');
     selectedIds.push(id);
    }
  }
  
  $('span.values').html(selectedIds.join(', '));
});

 $('button#finalSelection').click(function() {
     $('span.values').html(selectedIds.join(', '));
  });

span.values {
  color: #428bca;
}

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
 <script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
</head>

<body>

 <div id="circles">
  <svg>
   <circle id="first" cx="10" cy="10" r="10" fill="purple" />
   <circle id="second" cx="60" cy="60" r="5" fill="red" />
   <circle id="third" cx="110" cy="110" r="15" fill="orange" />
   <circle id="fourth" cx="90" cy="50" r="7" fill="yellow" />
  </svg>
 </div>
  
  <button type="button" id="finalSelection">Finish</button>
  
  <span style="display:block;margin-top: 10px;">Selected IDs: <span class="values"></span></span>
</body>

</html>

我在代码段中添加了评论，但让我告诉你它是如何工作的：

对鼠标右键单击事件侦听器使用 d3.select().on('contextmenu', function())。
preventDefault() 以防止鼠标右键单击的默认功能，即隐藏默认上下文菜单。
selectedIds 是一个数组，用于跟踪点击的 ID。
d3.event.ctrlKey 是这里的键 -- 它检查 CTRL 按下。
添加了简单的 HTML 来打印 ID。我想你可以从这里拿走它。

此外，以防万一您改变主意，将其设为 鼠标左键单击 + CTRL，将 contextmenu 更改为 click 并取出调用 preventDefault().

如果您有任何问题，请告诉我。希望这有帮助:)

如何使用 d3js select 多个 svg 元素

How to select multiple svg elements using d3js

javascript

d3.js

svg

selection

multipleselection

更新