如何在d3第3版中将散点图转换为折线图

Question

我已经使用d3.js实现了一个散点图。我想将此图表转换为折线图，但我无法这样做。我曾尝试遵循（http://embed.plnkr.co/wJDcZmkEzXaLVhuLZmcQ/），但并没有帮助我。

这是散点图的代码。

var data = [{"buildName":"otfa_R5-10_a1","build":"Build 1","value":"19628"},{"buildName":"otfa_R5-91_a1","build":"Build 2","value":"19628"},{"buildName":"otfa_R5-9_a1","build":"Build 3","value":"19628"}]
  var yValues = [], responseData = [];
  data.map(function(key) {
      var test = [];
      test[0] = key.build;
      test[1] = key.value;
      responseData.push(test);
      yValues = key.value;
  })

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

    var x = d3.scale.ordinal()
      .domain(responseData.map(function(d) {
        return d[0];
      }))
      .rangePoints([0, width], 0.5)

    var y = d3.scale.linear()
      .domain([5000,20000])
      .range([height, 0]);

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

    var colors = d3.scale.linear()
      .domain([5, 20])
      .range(['#4577bc', '#4577bc'])

    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');

    main.append('g')
      .attr('transform', 'translate(0,' + height + ')')
      .attr('class', 'main axis date')
      .call(xAxis)
      .selectAll("text")  
      .style("text-anchor", "end")
      .attr("dx", "-.8em")
      .attr("dy", ".15em")
      .attr("transform", "rotate(-45)" );

    // 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 div = d3.select("body").append("div") 
      .attr("class", "tooltip")             
      .style("opacity", 0);

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

    g.selectAll("scatter-dots")
      .data(responseData)
      .enter().append("svg:circle")
      .attr("cx", function(d, i) {
        return x(d[0]);
      })
      .attr("cy", function(d) {
        return y(d[1]);
      })
      .attr("r", 6)
      .style('stroke', function(d, i) {
        return colors(i);
      })
      .style('fill', function(d, i) {
        return colors(i);
      })
      .on("mouseover", function(d) {    
          d3.select(this).attr("r", 10).style("fill", "#fff8ee");   
          div.transition()      
              .duration(200)        
              .style("opacity", 2.9);       
          div   .html((d[1]))   
              .style("left", (d3.event.pageX) + "px")       
              .style("top", (d3.event.pageY - 18) + "px");  
          })                    
      .on("mouseout", function(d) { 
          d3.select(this).attr("r", 5.5).style("fill", "#4577bc");  
          div.transition()      
              .duration(500)        
              .style("opacity", 0); 
      });

我们如何添加一条连接这些点的线？

请帮助我！

Answer 1

要在现有图表中添加一条线，只需使用path generators将其添加。

行生成器：

var line = d3.svg.line()
  .x(function (d) { return x(d[0]); })
  .y(function (d) { return y(d[1]); });

将行添加到svg：

g.append('path').classed('line', true)
  .style( { fill: 'none', 'stroke': 'steelblue'} )
  .attr('d', line(responseData));

包含以上代码的片段以及一些CSS样式，使其看起来更好：

var data = [{"buildName":"otfa_R5-10_a1","build":"Build 1","value":"19628"},{"buildName":"otfa_R5-91_a1","build":"Build 2","value":"10628"},{"buildName":"otfa_R5-9_a1","build":"Build 3","value":"17628"}]
  var yValues = [], responseData = [];
  data.map(function(key) {
      var test = [];
      test[0] = key.build;
      test[1] = key.value;
      responseData.push(test);
      yValues = key.value;
  })

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

    var x = d3.scale.ordinal()
      .domain(responseData.map(function(d) {
        return d[0];
      }))
      .rangePoints([0, width], 0.5)

    var y = d3.scale.linear()
      .domain([5000,20000])
      .range([height, 0]);

    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 colors = d3.scale.linear()
      .domain([5, 20])
      .range(['#4577bc', '#4577bc'])

    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');

    main.append('g')
      .attr('transform', 'translate(0,' + height + ')')
      .attr('class', 'main axis date')
      .call(xAxis)
      .selectAll("text")  
      .style("text-anchor", "end")
      .attr("dx", "-.8em")
      .attr("dy", ".15em")
      .attr("transform", "rotate(-45)" );

    // 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 div = d3.select("body").append("div") 
      .attr("class", "tooltip")             
      .style("opacity", 0);

    var g = main.append("svg:g");
    
    g.selectAll("scatter-dots")
      .data(responseData)
      .enter().append("svg:circle")
      .attr("cx", function(d, i) {
        return x(d[0]);
      })
      .attr("cy", function(d) {
        return y(d[1]);
      })
      .attr("r", 6)
      .style('stroke', function(d, i) {
        return colors(i);
      })
      .style('fill', function(d, i) {
        return colors(i);
      })
      .on("mouseover", function(d) {    
          d3.select(this).attr("r", 10).style("fill", "#fff8ee");   
          div.transition()      
              .duration(200)        
              .style("opacity", 2.9);       
          div   .html((d[1]))   
              .style("left", (d3.event.pageX+4) + "px")       
              .style("top", (d3.event.pageY - 28) + "px");  
          })                    
      .on("mouseout", function(d) { 
          d3.select(this).attr("r", 5.5).style("fill", "#4577bc");  
          div.transition()      
              .duration(500)        
              .style("opacity", 0); 
      });
      
      
	var line = d3.svg.line()
  	.x(function (d) { return x(d[0]); })
		.y(function (d) { return y(d[1]); });
    
  g.append('path').classed('line', true)
    .style( { fill: 'none', 'stroke': 'steelblue'} )
    .attr('d', line(responseData)); 

path.domain {
  fill: none;
  stroke: #000;
}
.axis text {
  font-size: 12px;
}

div.tooltip {
  position: absolute;
  background: #FFF;
  padding: 5px;
  border: 1px solid #DDD;
  pointer-events: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.0/d3.min.js"></script>