Question

我正在尝试使用d3将文本添加到垂直线。原则上，文本附加到行但不显示。知道为什么吗？这是我的代码和当前状态的图像。Code problem 提前谢谢！

        var espanya = aggregatevalue(data)[0]['2015'];
        var svg = d3.select("#UnemploymentRate")
                    .append("svg")
                    .attr("id", "chart")
                    .attr("width", w)
                    .attr("height", h);

        svg.append("g")
            .attr("class", "espanya line")

        var lespanya = d3.select(".espanya.line")
                        .append("line")
                        .attr("class", "line")
                        .style("stroke-width", 2)
                        .style("stroke", "black")
                        .style("stroke-dasharray", ("3, 3"))
                        .style("fill", "none");

            lespanya.attr("x1", padding.left + widthScale(espanya))
                .attr("y1", heightScale(maximo))
                .attr("x2", padding.left + widthScale(espanya))
                .attr("y2", h - padding.bottom);

            lespanya.append("text")
                    .attr("x", 486.78)
                    .attr("y", 300)
                    .text("Spain Average unemployment");

Answer 1

您不应将该组附加到line元素。您可以将文字和行附加到.espanya。

它必须或多或少地像这样，

    var svg = d3.select("#UnemploymentRate")
                .append("svg")
                .attr("id", "chart")
                .attr("width", w)
                .attr("height", h);

    var container = svg.append("g")
        .attr("class", "espanya")

    var lespanya = container
                    .append("line")
                    .attr("class", "line")
                    .style("stroke-width", 2)
                    .style("stroke", "black")
                    .style("stroke-dasharray", ("3, 3"))
                    .style("fill", "none");

    var text = container
                 .append("text")
                 .attr("x", 486.78)
                 .attr("y", 300)
                 .text("Spain Average unemployment");

试试这个并提供一个jsfiddle，如果它不起作用。

如何将文本添加到垂直线d3js

1 个答案: