D3 线图和点图的位置不同答案

【问题标题】：D3 Line and dot plots differs in positionD3 线图和点图的位置不同
【发布时间】：2017-10-25 05:59:18
【问题描述】：

  var svg = d3.select("svg");
  var margin = {top: 20, right: 20, bottom: 30, left: 50};
  var width = +svg.attr("width") - margin.left - margin.right;
  var height = +svg.attr("height") - margin.top - margin.bottom;
  var g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  var parseTime = d3.timeParse("%d-%b-%y");

  var x = d3.scaleTime()
  .rangeRound([0, width]);


  var y = d3.scaleLinear()
  .rangeRound([height, 0]);

  var line = d3.line()
  .x(function(d) {
    console.log(x(d.date), "x(d.date)");
    d.xdata= x(d.date);
    return x(d.date); })
    .y(function(d) {
      console.log(y(d.close), "y(d.close)");
      d.ydata = y(d.close)
      return y(d.close); });

      d3.tsv("data.tsv", function(d) {
        d.date = parseTime(d.date);
        d.close = +d.close;
        return d;
      }, function(error, data) {
        if (error) throw error;

        x.domain(d3.extent(data, function(d) { return d.date; }));
        y.domain(d3.extent(data, function(d) { return d.close; }));

        g.append("g")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x))
        .select(".domain")
        .remove();

        g.append("g")
        .call(d3.axisLeft(y))
        .append("text")
        .attr("fill", "#000")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", "0.71em")
        .attr("text-anchor", "end")
        .text("Price ($)");

        g.append("path")
        .datum(data)
        .attr("fill", "none")
        .attr("stroke", "steelblue")
        .attr("stroke-linejoin", "round")
        .attr("stroke-linecap", "round")
        .attr("stroke-width", 1.5)
        .attr("d", line);
        console.log(data);

        svg.selectAll(".dot")
        .data(data)
        .enter().append("circle")
        .attr("class", "dot")
        .attr("r", 3.5)
        .attr("cx", function(d) { return x(d.date); })
        .attr("cy", function(d) { return y(d.close); })

      });

嗨，我想用线和点（圆）绘制一个 D3 图形

我能够绘制线 + 点图，但点上的位置存在偏差我的完整代码在上面我猜我在 scaletime 和 scaleLinear 中存在一些问题我是 d3 图的新手请帮我对此进行排序

结果屏幕截图是这样的：

请告诉我我做错了什么

【问题讨论】：

标签： javascript d3.js svg graph

【解决方案1】：

如您所见，您的 g 变量和您的 svg 变量不是一回事。 g 变量指的是带有小"translate" 的<g> 元素：

var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

因此，为了保持相同翻译，您应该将您的圈子附加到g 选择，而不是svg：

g.selectAll(".dot")
    .data(data)
    .enter()
    .append("circle")
    //etc...

【讨论】：