Question

我使用d3创建了一个散点图，并希望用线连接点，我尝试使用人们在线编写的内容连接线，但它似乎没有用。

function makeGraph(sampleData){
    console.log(sampleData);
    var vis = d3.select("#svgVisualize");

    yMax = d3.max(sampleData, function (point) {return point.y;});

    //step 1 : scale the data

    xRange = d3.scale.ordinal().domain(sampleData.map(function (d) { return d.x; })).rangePoints([0, 700]);
    yRange = d3.scale.linear().range([400, 40]).domain([0, yMax]);


    //step 2: scale the axis
    xAxis = d3.svg.axis().scale(xRange);
    yAxis = d3.svg.axis().scale(yRange).orient("left");

    //Step3: append the x and y axis
    vis.append('svg:g')
            .call(xAxis)
            .attr("transform", "translate(90,400)")
            .append("text")
            .text("Build Model")
            .attr("y", 70)
            .attr("x", 150);
    vis.append('svg:g')
            .call(yAxis)
            .attr("transform", "translate(90,0)")
            .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", -80)
            .attr("x", -130)
            .attr("dy", ".71em")
            .style("text-anchor", "end")
            .text("Number of Users");

    var circles = vis.selectAll("circle").data(sampleData);

    circles
            .enter()
            .insert("circle")
            .attr("cx", function (d) {return xRange(d.x);})
            .attr("cy", function (d) { return yRange(d.y); })
            .attr("r", 4)
            .attr("transform", "translate(90,0)")
            .style("fill", "blue");
    var lineFunction = vis.line()
            .x(function (d) {
              return d.x;
            })
            .y(function (d) {
              return d.y;
            })
            .interpolate("linear");

    vis.append("path")
            .attr("d", lineFunction(sampleData))
            .style("stroke-width", 0.5)
            .style("stroke", "rgb(6,120,155)")
            .style("fill", "none")
            .on("mouseover", function () {
              d3.select(this)
                      .style("stroke", "orange");
            })
            .on("mouseout", function () {
              d3.select(this)
                      .style("stroke", "rgb(6,120,155)");
            });
}

如果有人能提供帮助那就太棒了，我还是d3的新手

Answer 1

您的示例工作正常，我必须执行以下操作

将创建路径生成器的行更改为d3.svg.line（就像Gerardo的回答一样）
为您的圈子和路径创建一个组，这样您就不必向其中添加.attr("transform", "translate(90,0)")
使用data join作为路径（虽然不是必需的）

function makeGraph(sampleData) {
  var svg = d3.select('#svgVisualize')

  yMax = d3.max(sampleData, function(point) {
    return point.y;
  });

  xRange = d3.scale.ordinal().domain(sampleData.map(function(d) {
    return d.x;
  })).rangePoints([0, 700]);
  yRange = d3.scale.linear().range([400, 40]).domain([0, yMax]);


  //step 2: scale the axis
  xAxis = d3.svg.axis().scale(xRange);
  yAxis = d3.svg.axis().scale(yRange).orient("left");

  //Step3: append the x and y axis
  svg.append('svg:g')
    .call(xAxis)
    .attr("transform", "translate(90,400)")
    .append("text")
    .text("Build Model")
    .attr("y", 70)
    .attr("x", 150);
  svg.append('svg:g')
    .call(yAxis)
    .attr("transform", "translate(90,0)")
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", -80)
    .attr("x", -130)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("Number of Users");
  
  // data
  var g = svg.append('g')
    .attr('class', 'data')
    .attr("transform", "translate(90,0)")


  var circles = g.selectAll("circle").data(sampleData);
  circles
    .enter()
    .insert("circle")
    .attr("cx", function(d) {
      return xRange(d.x);
    })
    .attr("cy", function(d) {
      return yRange(d.y);
    })
    .attr("r", 4)
    .style("fill", "blue");
  
  var lineFunction = d3.svg.line()
    .x(function(d) { return xRange(d.x); })
    .y(function(d) { return yRange(d.y); })
    .interpolate("linear");
  var path = g.selectAll('path').data([sampleData])
    .enter()
    .append('path')
    .attr("d", lineFunction)
    .style("stroke-width", 0.5)
    .style("stroke", "rgb(6,120,155)")
    .style("fill", "none")
    .on("mouseover", function() {
      d3.select(this)
        .style("stroke", "orange");
    })
    .on("mouseout", function() {
      d3.select(this)
        .style("stroke", "rgb(6,120,155)");
    });
}

makeGraph([
  {x: 0, y: 100},
  {x: 100, y: 100},
  {x: 200, y: 200},
  {x: 300, y: 100}
])

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<svg id="svgVisualize" width="900" height="500" style="position: relative; left: 2%;"></svg>

Answer 2

行函数必须是这样的：

var lineFunction = d3.svg.line()
    .x(function(d) { return xRange(d.x); })
    .y(function(d) { return yRange(d.y); })
    .interpolate("linear");

点之间的d3线不起作用

2 个答案: