Question

我试图在svg的每个圆圈上显示一个标签，并在每次选择框更改时更改它们。有些东西出现了，但它不可读，我不知道出了什么问题。

这里是js bin：http://jsbin.com/legexovicu/edit?html,output

这是相关的代码：

    var pathContainers = svg.selectAll('g.line')

        .data(operacion);

        pathContainers.enter().append('g')

        .attr('class', 'line')
        .attr("style", function(d) {
            return "stroke: " + color_hash[operacion.indexOf(d)][1]; 
        });

        pathContainers.selectAll('path')
        .data(function (d) { return [d]; }) // continues the data from the pathContainer
        .enter().append('path')
          .attr('d', d3.svg.line()
            .x(function (d) { return xScale(d.x); })
            .y(function (d) { return yScale(d.y); })
          );

        pathContainers.selectAll('text')
            .data(function (d) { return d; })
            .enter().append('text')
            .attr('x', function (d) { return xScale(d.x) + 20; })
            .attr('y', function (d) { return yScale(d.y) + 25; })
            .text( function (d) { return d.name; })
            .attr("text-anchor", "middle")
            .attr("font-family", "arial")
            .attr("font-size", "5px")
            .attr("fill", "white")
            .attr('background','white');

        // add circles

        pathContainers.selectAll('circle')

        .data(function (d) { return d; })
        .enter().append('circle')
        .attr('cx', function (d) { return xScale(d.x); })
        .attr('cy', function (d) { return yScale(d.y); })
        .attr('r', 2)
        .style('fill', 'white')

        .attr("title", function(d) { return d.name });

如果我查看生成的html，我会看到类似的内容：

<text x="70" y="75" text-anchor="middle" font-family="arial" font-size="5px" fill="white" background="white">Consti</text>

但我最终得到的东西难以辨认。

Answer 1

将此内容添加到您的文本中：

.style("stroke-width", 1);

这是你的JSBin：http://jsbin.com/lujuhupata/1/edit?html,output

正确显示文本标签

1 个答案: