我如何遍歷 d3.select(this)

Question

恐怕我還是不明白 d3-object。
我創建了 d3-elements 並為它們分配了select.on("mouseover", onGraphicMouseOver)事件。
現在我在我的職能中並擁有this .

如果我記錄this我會得到我的直接 svg-string：

<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-string 作為文本從數據庫中加載。 然后：

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>