Question

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

这是我的代码

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>

而scatterplot.js是

  var data = [
  [2, 2],
  [2, 5],
  [6, 6],
  [6, 7],
  [25, 25]
  ];

    var margin = {
  top: 20,
  right: 15,
   bottom: 60,
  left: 60
    }, width = 960 - margin.left - margin.right,
   height = 500 - margin.top - margin.bottom;

     var x = d3.scale.linear()
    .domain([0, d3.max(data, function (d) {
  return d[0];
     })])
  .range([0, width]);

    var y = d3.scale.linear()
  .domain([0, d3.max(data, function (d) {
  return d[1];
    })])
   //.range([height, 0]) //flip y
      .range([0, height]);

    var chart = d3.select('body')
.append('svg:svg')
.attr('width', width + margin.right + margin.left)
.attr('height', height + margin.top + margin.bottom)
.attr('class', 'chart');

      var main = chart.append('g')
    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
      .attr('width', width)
     .attr('height', height)
    .attr('class', 'main');

   // draw the x axis
      var xAxis = d3.svg.axis()
         .scale(x)
        //.orient('bottom')
        .orient('top'); // adjust ticks to new x axis position

        main.append('g')
     //.attr('transform', 'translate(0,' + height + ')')
     .attr('transform', 'translate(0,0)') // move x axis up
   .attr('class', 'main axis date')
   .call(xAxis);

    // draw the y axis
      var yAxis = d3.svg.axis()
       .scale(y)
      .orient('left');

      main.append('g')
    .attr('transform', 'translate(0,0)')
      .attr('class', 'main axis date')
    .call(yAxis);

        var g = main.append("svg:g");

        g.selectAll("scatter-dots")
          .data(data)
      .enter().append("svg:circle")
      .attr("cx", function (d, i) {
        return x(d[0]);
          }) 
            .attr("cy", function (d) {
        return y(d[1]);
     }) 
       .attr("r", 8);

            main.append("g")
      .attr("class", "grid")
    .attr("transform", "translate(0," + height + ")")
     .call(make_x_axis()
      .tickSize(-height, 0, 0)
     .tickFormat(""))

         main.append("g")
       .attr("class", "grid")
          .call(make_y_axis()
       .tickSize(-width, 0, 0)
      .tickFormat(""))

        function make_x_axis() {
      return d3.svg.axis()
         .scale(x)
          .orient("bottom")
           .ticks(10)
      }

         function make_y_axis() {
      return d3.svg.axis()
         .scale(y)
            .orient("left")
        .ticks(10)
          }


[2, 2],
[2, 5],
[6, 6],
[6, 7],
[25, 25]

我使用了d3.svg.line（）

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

和

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

但它导致网格线消失。如何将这些数据点与各行联系起来？

Answer 1

我之前使用了与你相同的小提琴作为基础。这是FIDDLE，点之间有直线。

// 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

请注意，我进行线性插值，使其通过这些点。此外，我不确定你是否意味着真正的单独线条而不是连接点的线条。各条线的计算方法不同。但是，如果这适合你，请先看看。

绘制连接数据点的线

1 个答案: