在点之间画一条线

debugcn 发表于 Dev

赛义夫

另一个琐碎的问题。我试图在两点之间画一条线，从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>

mdml

您的问题是您正在绘制<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

你得到这个：