javascript - 如何迭代 d3.select(this)

Question

恐怕我还是不明白 d3-object。
我创建了 d3-elements 并为其分配了 select.on("mouseover", onGraphicMouseOver) 事件。
现在我在我的函数中并且有 this。

如果我记录this，我会得到直接的svg字符串:

<g id="a29" style="touch-action: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
  <line class="hotwater graphic" x1="270" y1="110" x2="540" y2="110" id="g29"></line>
  <line class="hotwater graphic" x1="270" y1="120" x2="540" y2="120"></line>
</g>

到目前为止，一切顺利。

现在我想对这些线条进行处理，比如为它们分配类，为此，我想迭代它们。
最好的方法是什么？

我的第一个想法:

for (var i = 0; i < this.childNodes.length; i++) {
    this.childNodes[i].classList.add("graphicmouseover");
}

但是有没有更简单的方法，使用d3.js。
如果是的话，我怎样才能自己找到这些信息。我已经使用 d3 好几个星期了，但对这个概念还没有一个真正完整的想法。对于像我这样的傻瓜来说，也许有人知道比原始文档更信息丰富的文档:(
我真的很感谢有用的提示，所以我不必用这些菜鸟问题来惹恼你。

谢谢卡斯滕

根据请求更新:我从数据库中将内部元素(此处为两行)的 svg 字符串作为文本加载。然后:

function loadGraphicIntoEditor(svgGraphics, editor) {
//svgGraphics are the json-recordsets, editor is the d3.selected svg-area

  for (var i = 0; i < svgGraphics.length; i++) {
    var graphic = svgGraphics[i];

    const graph = editor.append("g")             //appending the g-tag to the svg-area
        .attr("id", "a" + graphic.Id.toString())
        .html(graphic.SvgString)                 //the string <line...></line>
        .on("mouseenter", onGraphicMouseEnter)
        .on("mouseover", onGraphicMouseOver)
        .on("mouseout", onGraphicMouseOut)
        .on("mousedown", onGraphicMouseDown)
        .on("dblclick", onGraphicDblClick)
        .on("contextmenu", onGraphicContext)
        .call(d3.drag()
            .on("start", graphicDragStart)
            .on("drag", graphicDragging)
            .on("end", graphicDragEnd));
    d3.select(graph.node().childNodes[0]).attr("id", "g" + graphic.Id.toString());
  }
}

最终更新:

这是我现在的解决方案:

function onGraphicMouseOver(d, i) {
    d3.select(this).selectAll('.graphic').classed("graphicmouseover", true);
}

...生活可以如此简单:)

谢谢大家

Answer 1

尝试如下:

var lines = d3.selectAll('line.hotwater');
//console.log(lines);

lines.each(function(d,i) {
  //console.log(i, d, this);
  //console.log(this);
  d3.select(this)
    .attr("stroke", "black")
    .attr("stroke-width", "5px")
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="1000" height="1000" style="background:#ff0000">
  <g id="a29" style="touch-action: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
    <line class="hotwater graphic" x1="270" y1="110" x2="540" y2="110" id="g29"></line>
    <line class="hotwater graphic" x1="270" y1="120" x2="540" y2="120"></line>
  </g>
</svg>

输出:

注意:我在 HTML 中将 svg 背景设置为红色

但后来我用了 d3.selectAll('line.hotwater');选择我们的两条线。然后用lines.each()循环它们。并使用d3.select(this)将其转换为 d3 选择，然后我们可以像往常一样进行修改:

d3.select(this)
    .attr("stroke", "black")
    .attr("stroke-width", "5px")

这会向线条添加黑色描边和 5px 描边宽度，以便我们在 svg 上看到它们。

我在这里使用 d3.js V5.x，但我认为 API 在几个版本中都是这样的。

更新:正如OP所澄清

最简单的方法就是使用 d3 的 selectAll:

select(this).selectAll('.graphic').classed("graphicmouseover", true);

这本质上是对“this”(来自事件)进行后代 querySelectorAll，然后循环并为每个选定的设置类。 D3 通过其全选为我们管理此操作。

在更全面地了解OP的问题后进行更新。

问题是事件附加到组而不是行。

但我认为有一种方法可以通过如下模式来实现这一目标:

const graph = editor.append("g")             //appending the g-tag to the svg-area
        .attr("id", "a" + graphic.Id.toString())
        .html(graphic.SvgString);                 //the string <line...></line>

    console.log(graph.selectAll('line.graphic').size()); //gives the size of the selection

    graph.selectAll('line.graphic')
        // .attr('stroke', 'blue')
        .on('click', onClick);

我尝试从此处的OP代码中制作一个最小的可重现示例:https://codepen.io/Alexander9111/pen/MWwmVLr

也在这里:

const svgGraphics = [
  {
    Id: '29',
    SvgString: `<line class="hotwater graphic" x1="270" y1="110" x2="540" y2="110" id="g29"></line>
               <line class="hotwater graphic" x1="270" y1="120" x2="540" y2="120"></line>`
  }
]

const editor = d3.select('svg');

loadGraphicIntoEditor(svgGraphics, editor);

function onClick(d,i){
  console.log('clicked');
  //console.log(this); //or console.log(event.target);
}

function loadGraphicIntoEditor(svgGraphics, editor) {
//svgGraphics are the json-recordsets, editor is the d3.selected svg-area

  for (var i = 0; i < svgGraphics.length; i++) {
    var graphic = svgGraphics[i];

    const graph = editor.append("g")             //appending the g-tag to the svg-area
        .attr("id", "a" + graphic.Id.toString())
        .html(graphic.SvgString);                 //the string <line...></line>

    console.log(graph.selectAll('line.graphic').size());

    graph.selectAll('line.graphic')
        // .attr('stroke', 'blue')
        .on('click', onClick);
        // .on("mouseenter", onGraphicMouseEnter)
        // .on("mouseover", onGraphicMouseOver)
        // .on("mouseout", onGraphicMouseOut)
        // .on("mousedown", onGraphicMouseDown)
        // .on("dblclick", onGraphicDblClick)
        // .on("contextmenu", onGraphicContext)
        // .call(d3.drag()
        //     .on("start", graphicDragStart)
        //     .on("drag", graphicDragging)
        //     .on("end", graphicDragEnd));
    d3.select(graph.node().childNodes[0]).attr("id", "g" + graphic.Id.toString());
  }
}

line {
  stroke: black;
  stroke-width: 5px; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="1000" height="1000" style="background:#ff0000">

</svg>