Question

另一个微不足道的问题。我试图在点之间画一条线，这里从lineData [0]到lineData [1]，依此类推。我得到一个非常有趣的区域而不是一条线！你能帮我么。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title> Icon </title>
    <script type="text/javascript" src="lib/d3/d3.v3.js"></script>
</head>


<body>

<p id="drawing">

    <script>

        // data is not same as here, just to explain the requirement created it.
        var lineData = [{"x": 55, "y": 65},
            {"x": 63, "y": 57},
            {"x": 157, "y": 57},
            {"x": 165, "y": 65}];

        var svg = d3.select("#drawing")
                .append("svg")
                .attr("height", 200)
                .attr("width", 200)
                .attr("transform", "translate(20, 20)");

        var lineFunction = d3.svg.line()
                .x(function (d) {
                    return d.x;
                })
                .y(function (d) {
                    return d.y;
                })
                .interpolate("linear");

        svg.append("path")
                .attr("d", lineFunction(lineData))
                .style("stroke-width", 0.5)
                .style("stroke", "rgb(6,120,155)")
                .on("mouseover", function () {
                    d3.select(this)
                            .style("stroke", "orange");
                })
                .on("mouseout", function () {
                    d3.select(this)
                            .style("stroke", "rgb(6,120,155)");
                });

    </script>

</body>
</html>

Answer 1

您的问题是您正在绘制<path>，而且您还没有设置路径的填充。默认情况下它是黑色的，因此您正在绘制对象。在添加<path>：

后尝试删除填充

svg.append("path")
        .attr("d", lineFunction(lineData))
        .style("stroke-width", 0.5)
        .style("stroke", "rgb(6,120,155)")
        .style("fill", "none") // <------ add this line

你得到了这个：

line

在点之间画一条线

1 个答案: