Question

我正在使用一个相当典型的d3 sankey，只需稍微改一下就可以使用tspan扩展rect的标签以包含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>

我试图用类＆＃34; calc-total＆＃34;制作项目。可点击，并将以下内容添加到tspan追加调用：

.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) });

我还根据其他stackoverflow结果添加了以下CSS：

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

无论我做什么，我都无法点击文本/ tspan。我已尝试使用jquery引用类，我已尝试将其放在文本上，而tspan附加区域......我很难过。我很乐意帮忙。

再次，我的目标是让两个tspans与class =＆＃34; calc-total＆＃34;可点击并运行JS方法（不是链接）。

提前谢谢。

Answer 1

对于那些对此功能感兴趣的人;我确实让它发挥作用，然而，它并不是很优雅。

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

我最终将svg Rect放在我想要点击的文本的顶部。它的风格是透明的。将.call(call(d3.behavior.drag()...添加到rect，并在dragstart上触发我的操作，并且不执行任何操作。

......但它确实有效。

d3 sankey svg text tspan - 点击不工作

1 个答案: