Javascript 绘制连接数据点的线_Javascript_Html_Function_Svg_D3.js

Javascript 绘制连接数据点的线

javascript html function svg d3.js

Javascript 绘制连接数据点的线,javascript,html,function,svg,d3.js,Javascript,Html,Function,Svg,D3.js,如何在点之间绘制单独的线这是我的密码 index.html文件是 <!DOCTYPE html> <html> <head> <title>The d3 test</title> <style> .grid .tick { stroke: lightgrey; opacity: 0.7; } .grid

如何在点之间绘制单独的线

这是我的密码

index.html文件是

   <!DOCTYPE html>
        <html>
      <head>
       <title>The d3 test</title>
       <style>

     .grid .tick {
     stroke: lightgrey;
      opacity: 0.7;
      }
      .grid path {
        stroke-width: 0;
    }
       .chart {
       }
        .main text {
         font: 10px sans-serif;
    }
       .axis line, .axis path {
   shape-rendering: crispEdges;
    stroke: black;
   fill: none;
    }
       circle {
   fill: steelblue;
     }

       </style>
      <script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.js">
                      </script>
    </head>
    <body>
      <div class='content'>
        <!-- /the chart goes here -->
      </div>
       <script type="text/javascript" src="scatterchart.js"></script>

    </body>
   </html>

我使用了d3.svg.line（）

及

但这导致了网格线的消失。如何将这些数据点与单独的行连接起来？

我使用了之前为您准备的小提琴作为基础。以下是点与点之间的直线

// begin of drawing lines
var line = d3.svg.line()
    .x(function(d){return x(d[0]);})
    .y(function(d){return y(d[1]);})
    .interpolate("linear");  

g.append("path")
    .attr("d", function(d) { return line(data)})
    .attr("transform", "translate(0,0)")
    .style("stroke-width", 2)
        .style("stroke", "steelblue")
        .style("fill", "none");
// end of drawing lines

请注意，我放置了线性插值，使其通过点。另外，我不确定你指的是真正的单独的线，而不是连接点的线。个别线路的计算结果可能会有所不同。但是，让我们先看看这是否适合您。

我使用了之前为您准备的小提琴作为基础。以下是点与点之间的直线

// begin of drawing lines
var line = d3.svg.line()
    .x(function(d){return x(d[0]);})
    .y(function(d){return y(d[1]);})
    .interpolate("linear");  

g.append("path")
    .attr("d", function(d) { return line(data)})
    .attr("transform", "translate(0,0)")
    .style("stroke-width", 2)
        .style("stroke", "steelblue")
        .style("fill", "none");
// end of drawing lines

非常感谢FernOfTheAndes。嗨，FernOfTheAndes，您知道如何更改数据点的颜色吗？如果点位于[2,2]和[2,5]一样的同一条线上，那么数据点的颜色应该相同，如果它位于[2,5]到[6,6]这样的不同线上，那么数据点的颜色应该改变吗？如何实现这一点？因为线实际上是一个路径元素，所以改变圆的颜色肯定比改变线的颜色更容易。但是，由于点[2,5]同时连接到[2,2]和[6,6]点，因此如何表示点[2,5]中的颜色？你会用两种不同的颜色画半个圆圈吗？（对不起，我不太清楚要求。）不不不。。。就像[2,2]和[2,5]都有钢蓝色作为它们的颜色，而[6,6]处的圆圈应该是棕色的。因此，基本上，如果沿着相同的x坐标，它们应该有相同的颜色。下面是实现的示例。你可以玩颜色，现在我只使用了一个内置的d3色标。非常感谢FernOfTheAndes。嗨，FernOfTheAndes，你知道如何改变数据点的颜色吗？如果点位于[2,2]和[2,5]一样的同一条线上，那么数据点的颜色应该相同，如果它位于[2,5]到[6,6]这样的不同线上，那么数据点的颜色应该改变吗？如何实现这一点？因为线实际上是一个路径元素，所以改变圆的颜色肯定比改变线的颜色更容易。但是，由于点[2,5]同时连接到[2,2]和[6,6]点，因此如何表示点[2,5]中的颜色？你会用两种不同的颜色画半个圆圈吗？（对不起，我不太清楚要求。）不不不。。。就像[2,2]和[2,5]都有钢蓝色作为它们的颜色，而[6,6]处的圆圈应该是棕色的。因此，基本上，如果沿着相同的x坐标，它们应该有相同的颜色。下面是实现的示例。你可以玩颜色，现在我只使用了一个内置的d3色阶。

       g.append("path")
    .attr("d", line);

// begin of drawing lines
var line = d3.svg.line()
    .x(function(d){return x(d[0]);})
    .y(function(d){return y(d[1]);})
    .interpolate("linear");  

g.append("path")
    .attr("d", function(d) { return line(data)})
    .attr("transform", "translate(0,0)")
    .style("stroke-width", 2)
        .style("stroke", "steelblue")
        .style("fill", "none");
// end of drawing lines