Question

我看起来又高又低。但每个指南都让我失望。为什么文本拒绝出现在我的SVG画布上？

我正在使用D3。这是相关的JavaScript代码。让我知道您需要的其他信息。

var width = $('body').width(),
    height = $(window).height()

var x = d3.scale.linear()
    .range([0, width]) // minus a 10 pixel buffer?  we should really get the width of #chart !!!

x.domain([0, d3.max(_.pluck(graph.nodes, 'x'))])


links = svg.selectAll('.link').data(graph.links) // links before nodes so that lines in SVG appear *under* nodes
    .enter().append('line')
        .classed('link', true)
        .attr('marker-end', 'url(#arrow-head)') // add in the marker-end defined above

var texts = svg.selectAll('text').data(graph.nodes)
    .enter().append('text')
        .text( function (d) { return "some string"; })
        .attr({
            x: d => d.x,
            y: d => d.y,
            'font-family': "sans-serif",
            'font-size': "20px",
            'text-anchor': "middle",
            fill: "red",
        })

nodes = svg.selectAll('.node').data(graph.nodes)
    .enter().append('circle')
        .classed('node', true)
        .attr({
            r: 12,
            opacity: 0,
        })
        .call(drag)

链接效果很好。节点工作得很好（尽管我将它们的不透明度设置为0，以防文本隐藏在它们后面。文本从未起作用。

javascript控制台中没有错误，但有一个警告：＆＃34;不推荐使用一个参数调用CSSStyleSheet.insertRule（）。请传递index参数：insertRule（x，0）。＆＃34;。我不认为这是相关的。

以下是为4个节点动态生成SVG后的HTML：

<svg width="1440" height="802">
    <defs fill="green">
        <marker class="arrow-head" id="arrow-head" viewBox="0 -5 10 10" refX="21" refY="0" markerWidth="5" markerHeight="5" orient="auto">
            <path d="M0,-5L10,0L0,5"></path>
        </marker>
    </defs>

    <line class="link" marker-end="url(#arrow-head)" x1="754.0426851654547" y1="374.5980897296999" x2="752.8325728896963" y2="420.70270229471504"></line>
    <line class="link" marker-end="url(#arrow-head)" x1="677.2395972547282" y1="405.1687095552065" x2="710.2028024386651" y2="437.39885286852365"></line>
    <line class="link" marker-end="url(#arrow-head)" x1="710.2028024386651" y1="437.39885286852365" x2="752.8325728896963" y2="420.70270229471504"></line>

    <text x="40" y="40" font-family="sans-serif" font-size="20px" text-anchor="middle" fill="red">some string</text>
    <text x="80" y="80" font-family="sans-serif" font-size="20px" text-anchor="middle" fill="red">some string</text>
    <text x="160" y="160" font-family="sans-serif" font-size="20px" text-anchor="middle" fill="red">some string</text>
    <text x="0" y="20" font-family="sans-serif" font-size="20px" text-anchor="middle" fill="red">some string</text>

    <circle class="node" r="12" opacity="0" cx="754.0426851654547" cy="374.5980897296999"></circle>
    <circle class="node" r="12" opacity="0" cx="752.8325728896963" cy="420.70270229471504"></circle>
    <circle class="node" r="12" opacity="0" cx="677.2395972547282" cy="405.1687095552065"></circle>
    <circle class="node" r="12" opacity="0" cx="710.2028024386651" cy="437.39885286852365"></circle>
</svg>

SVG文本不会通过D3显示

0 个答案: