在點之間畫一條線

另一個微不足道的問題。我試圖在點之間繪製一條線，這裏從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>

來源

2014-12-02 pascal

您的問題是，你畫一個<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

來源

2014-12-02 21:51:07 mdml

在點之間畫一條線

回答

相關問題