d3 sankey svg 文本 tspan - 单击不起作用

Question

我使用的是相当典型的 d3 sankey，使用 tspan 对矩形的标签进行了一个小改动以包含 3 行文本...代码如下所示：

<svg>
  <g>
   <g></g>
   <g></g>
   ...
  </g>
  <g>
    <g class="node" transform="translate(1224,183.54665552874204)">
      <rect height="3.1713693459563146" width="15" class="svg-rect-17" style="stroke: none;">
        <title>1,079</title>
      </rect>
      <text text-anchor="end" class="svg-text-17" transform="">
        <tspan x="-10" text-anchor="end" y="3.1713693459563146" class="">1,079</tspan>
        <tspan x="20" text-anchor="end" y="43.171369345956315" class="calc-total">Execution Fallout</tspan>
        <tspan x="20" text-anchor="end" y="73.17136934595632" class="calc-total">4,904</tspan>
      </text>
    </g>
    <g></g>
    ...
  </g>
</svg>

我试图通过将以下内容添加到 tspan 附加调用来使具有 class "calc-total" 的项目可点击：

.on('click',function(d) { console.log('label',d) });

可以在此处的上下文中看到：

//sankey node text block
var tspan = node
    .append("text")
    .attr("text-anchor", "end")
    .attr("class", function (d) {
        return "svg-text-"+d.id+" svg-text-" + d.type;
    })
    .attr("transform", function(d) { return (d.id==0) ? "rotate(270,10,20)" : ""});


//node data
tspan.append("tspan")
    .attr("x", function (d) {
        return calcXP(d, 'data', false)
    })
    .attr("text-anchor", function (d) {
        return calcAnc(d, 'data', false);
    })
    .attr("y", function (d) {
        return calcYP(d, 'data', false)
    })
    .text(function (d) {
        return numberWithCommas(d.total);
    })
    .attr("class", function (d) {
        return "data-" + d.type + " data-" + d.type + (d.subtype ? "-" + d.subtype : "");
    });

//node label total
tspan.filter(function (d) {
    return d.subtype && d.subtype == 'undefined';
}).append("tspan")
    .attr("x", function (d) {
        return calcXP(d, 'label', true)
    })
    .attr("text-anchor", function (d) {
        return calcAnc(d, 'label', true);
    })
    .attr("y", function (d) {
        return calcYP(d, 'label', true)
    })
    .text(function (d) {
        return d.category;
    })
    .attr("class", "calc-total")
    .on('click',function(d) { console.log('label',d) });

//node data total
tspan.filter(function (d) {
    return d.subtype && d.subtype == 'undefined';
}).append("tspan")
    .attr("x", function (d) {
        return calcXP(d, 'data', true)
    })
    .attr("text-anchor", function (d) {
        return calcAnc(d, 'data', true);
    })
    .attr("y", function (d) {
        return calcYP(d, 'data', true)
    })
    .text(function (d) {
        return numberWithCommas(totalByCat[d.category]);
    })
    .attr("class", "calc-total")
    .on('click',function(d) { console.log('data',d) });

我还根据其他 Whosebug 发现添加了以下 CSS：

svg text, svg text tspan {
    pointer-events: none;
    display: block;
}

无论我做什么，我都无法点击 text/tspan。我试过使用 jquery 引用 classes，我试过将它放在文本上，以及 tspan 附加区域......我很难过。我希望得到一些帮助。

再一次，我的目标是同时拥有 class = "calc-total" 可点击的 tspan 和运行 JS 方法（不是 link）。

提前致谢。

Answer 1

对于对此功能感兴趣的人；我确实让它工作了，但是，它不是很优雅。

我永远无法获得在 sankey 上调用 javascript 的 tspan 或文本。奇怪的是，我很容易在可折叠树和其他 d3 svg 元素上完成这项工作，但 sankey 困扰了我好几天。

我最终将一个 svg Rect 放置在我希望可点击的文本的顶部。将其设置为透明。将 .call(call(d3.behavior.drag()... 添加到矩形，并在 dragstart 上触发我的动作，并且不执行任何拖动操作。

呃...但它有效。

d3 sankey svg 文本 tspan - 单击不起作用

d3 sankey svg text tspan - on click not working

javascript

svg

d3.js

sankey-diagram