javascript - Drawing a line connecting data points

admin管理员组
文章数量:1023782

How to draw individual lines between points

Here is my code

The index.html file is

   <!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=".v2.js">
                      </script>
    </head>
    <body>
      <div class='content'>
        <!-- /the chart goes here -->
      </div>
       <script type="text/javascript" src="scatterchart.js"></script>

    </body>
   </html>

And scatterplot.js is

  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]

I used d3.svg.line()

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

and

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

but it resulted in disappearance of grid lines. How to join these datapoints with individual lines ?

How to draw individual lines between points

Here is my code

The index.html file is

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

And scatterplot.js is

  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]

I used d3.svg.line()

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

and

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

but it resulted in disappearance of grid lines. How to join these datapoints with individual lines ?

Share Improve this question edited Mar 17, 2014 at 7:12 Sulthan Allaudeen 11.3k12 gold badges49 silver badges64 bronze badges asked Mar 17, 2014 at 7:08 user3355665 592 silver badges9 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 5

I used the same fiddle I had for you before as the basis. Here is the FIDDLE with lines between points.

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

Note that I put the linear interpolation so it passes through the points. Also, I was not sure if you meant true individual lines rather than a line connecting the points. The calculation for individual lines would be different. But, let's see first if this suits you.

How to draw individual lines between points

Here is my code

The index.html file is

   <!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=".v2.js">
                      </script>
    </head>
    <body>
      <div class='content'>
        <!-- /the chart goes here -->
      </div>
       <script type="text/javascript" src="scatterchart.js"></script>

    </body>
   </html>

And scatterplot.js is

  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]

I used d3.svg.line()

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

and

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

but it resulted in disappearance of grid lines. How to join these datapoints with individual lines ?

How to draw individual lines between points

Here is my code

The index.html file is

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

And scatterplot.js is

  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]

I used d3.svg.line()

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

and

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

but it resulted in disappearance of grid lines. How to join these datapoints with individual lines ?

Share Improve this question edited Mar 17, 2014 at 7:12 Sulthan Allaudeen 11.3k12 gold badges49 silver badges64 bronze badges asked Mar 17, 2014 at 7:08 user3355665 592 silver badges9 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 5

I used the same fiddle I had for you before as the basis. Here is the FIDDLE with lines between points.

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

本文标签： javascriptDrawing a line connecting data pointsStack Overflow

版权声明：本文标题：javascript - Drawing a line connecting data points - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://it.en369.cn/questions/1745515101a2154002.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

369IT编程

javascript - Drawing a line connecting data points - Stack Overflow

1 Answer 1

1 Answer 1

更多相关文章

javascript - Drawing a line connecting data points - Stack Overflow

发表评论

推荐文章

javascript - How to delete whole span element with contenteditable spans inside it? - Stack Overflow

javascript - How can i remove bullet from dragable element? - Stack Overflow

My plugin wants to update another plugin

javascript - Angular application not building NgModule - Stack Overflow

BB-Code-RegEx in javascript - Stack Overflow

热门文章

regex - Detect non valid XML characters (javascript) - Stack Overflow

Efficient way of filtering arrays in javascript - Stack Overflow

javascript - React Getting error with BroadcastChannel API - Stack Overflow

r - Recursively fill dates in dplyr mutate - Stack Overflow

jquery - Execute a javascript function from MVC controller - Stack Overflow

javascript - BackboneJS site structure - Stack Overflow

css - WP CF7 how to change calendar color - Stack Overflow

javascript - Disable FancyTree Nodes - Stack Overflow

javascript - HTML5 video frame capture to bitmap - Stack Overflow

javascript - How to get the length of an ordered list? - Stack Overflow

最新文章

windows设置断电重启开机后自动输入锁屏密码登录

Windows系统设置开机默认开启数字小键盘

Windows11 开机自动同步时间（开机时间不更新问题）

windows配置开机自启动软件或脚本

【Redis】Windows设置Redis为开机自启动

程序员刚毕业，先去大厂镀金还是先去小厂攒经验？

万象2008清空boss账户密码

【Tools】GitBook简明教程

oracle exadata celldisk 闪存盘受损导致性能下降

SDUT 2138 图结构练习——BFSDFS——判断可达性

Update Docker volume when image is updated - Stack Overflow

javascript - Express.js net::ERR_CONNECTION_CLOSED - Stack Overflow

performance - How to cache a different page version based on HTTP header?

search - How to filter documents in Elasticsearch where the name field of the first element of an array is in a given list? - St

javascript - Chrome Extension tabCapture API Audio Stream to Play in HTML Page - Stack Overflow