javascript - 如何使用 d3 选择并突出显示一条线上的所有点？

Question

您只有一条线的端点坐标作为二维数组。

lines[0][0] -> line 1, coordinates x1,y1
lines[0][1] -> line 1, coordinates x2, y2

and so on.

该行通过图像呈现给您。该行不可编辑，但您希望在单击该行上的任意位置时有一个单击事件来选择整行。

我们可以找出鼠标单击的坐标位置是否在线上及其端点之间，或者我们可以将鼠标事件附加到线对象上。然后突出显示位于两个端点坐标之间的直线上的所有点。

现在，您甚至可能需要一次选择多行 - 单击第 1 行，单击第 2 行并突出显示这两行

你会如何处理这个问题？

我的 html 看起来像这样 -

<div id="myImage" class="col-md-12 nopadding">
  <svg viewBox="0 0 800 400" width="100%" height="100%" id="svg1">
   <g transform="translate(0,0)scale(1)">
     <image href="someimage.jpg" id = "someimageid" x="0" y="0" width="100%" height="100%"></image>
     <g class="line" readonly="true" id="item_1">
       <path d="M100 100L300, 200" vector-effect="non-scaling-stroke"></path>
       <circle class="item_1_circle" cx="100" cy="100" vector-effect="non-scaling-stroke" r="2"></circle>
        <circle class="item_1_circle" cx="100" cy="100" vector-effect="non-scaling-stroke" r="2"></circle>
     </g>
   </g>
   </svg>
</div>   

我尝试通过此选择路径 -

     d3.select(this).selectAll('path')
          .data(function (d) {
            return [d.points];
          })
          .enter()
          .append('path')
          .attr('d', line)
          .on('click', doclicks);
      });

function doclicks(d, i){  
    d3.select(this).attr({
      stroke: "purple"
    });
  }

它似乎可以工作，但间歇性。单击线条时我必须非常准确，并且无法更改线条宽度。

<小时/>

作为一个例子，考虑这个已经存在的 fiddle - http://jsfiddle.net/EhQMv/1/它当前在线条节点(末端)处突出显示。您将如何突出显示它的路径(节点/圆之间的线)？

<小时/>

Answer 1

对于我来说，如果可以选择，我将使用 on() 函数将事件(“鼠标悬停”或“单击”，具体取决于我想要执行的操作)附加到该行，然后使用 style() 来“突出显示"带有一些 css 的行。

D3 on()

D3 style()