Question

我正在尝试在现有散点图上添加数据，但我希望添加的数据点位于背景中或位于背景中而不是位于顶部。当我将新数据附加到图中时，我希望它在后面而不是上面。我希望原始数据集成为最重要的数据点。当我添加新数据时，它是由按钮触发的。而且我宁愿不必清空svg然后重新加载。我希望这是有道理的。

添加更多数据之前原始散点图的代码：

var svg = d3.select("#plot").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");
svg.append("defs").append("clipPath")
    .attr("id", "clip")
  .append("rect")
    .attr("width", width)
    .attr("height", height);
var xMax = d3.max(graphdata, function(d) { return d["x"]; }),
          yMax = d3.max(graphdata, function(d) { return d["y"]; });
var xScale = d3.scaleLinear()
    .range([0, width])
    .domain([0, xMax]).nice();

var yScale = d3.scaleLinear()
    .range([height, 0])
    .domain([0, yMax]).nice();

var xAxis = d3.axisBottom()
    .scale(xScale);
var yTicks = 5
var yAxis = d3.axisLeft()
    .scale(yScale);
var gX = svg.append('g')
        .attr('transform', 'translate(0,' + height + ')')
        .attr('class', 'x axis')
        .call(xAxis);

// y-axis is translated to (0,0)
var gY= svg.append('g')
        .attr('transform', 'translate(0,0)')
        .attr('class', 'y axis')
        .call(yAxis
        );

var bubble = svg.selectAll('.bubble')
        .data(graphdata)
    .enter().append('path')
        .attr('class', 'bubble')
         .attr("d", d3.symbol().type(d3.symbolCircle))
      .attr("transform", function(d) { return "translate(" + xScale(d["x"]) + "," + yScale(d["y"]) + ")"; })
        .attr('r', 3.5 )
        .attr('fill-opacity', 0.5)
        .style('fill','blue');

bubble.append('title')
    .attr('x', 3.5 )
    .text(key);

当前更新/添加代码：

  let new_yScale = yScale;
  let new_xScale = xScale;
  yAxis.scale(new_yScale);
  xAxis.scale(new_xScale);

  svg.transition().duration(750).select('.y.axis').call(yAxis);
  svg.transition().duration(750).select('.x.axis').call(xAxis);

  let scatterSelect = svg.selectAll("bubble").data(graphdata);

  scatterSelect.transition()
        .duration(750)
        .attr("cx", function(d) {
        return new_xScale(d["x"]);
      })
        .attr("cy", function(d) {
        return new_yScale(d["x"]);
      })
        .style("fill", "grey");

  scatterSelect.enter()
    .append("path")
        .attr('class', 'bubble')
         .attr("d", d3.symbol().type(d3.symbolTriangle))
      .attr("transform", function(d) { return "translate(" + 

new_xScale(d["x"]) + "," + new_yScale(d["y"]) + ")"; })
          .attr("r", 3.5)
          .attr('fill-opacity', 0.5)
          .style("fill",'grey');

Answer 1

SVG元素的可视堆叠顺序由将它们添加到主要SVG元素的顺序确定，而该顺序由数据数组确定。为了使新数据在视觉上位于旧数据之后，它必须位于数据数组的开头，以便首先添加它。为此，您可以使用unshift或concat

Answer 2

使用插入内容固定

scatterSelect.enter()
.insert("path", ".bubble")
    .attr('class', 'bubble')
     .attr("d", d3.symbol().type(d3.symbolTriangle).size(30))
  .attr("transform", function(d) { return "translate(" + new_xScale(d["x"]) + "," + new_yScale(d["y"]) + ")"; })
  .attr("r", 3.5)
  .attr('fill-opacity', 1.0)
  .style("fill",'#9EB5DF');

D3 js更新图仅在背景而非顶部添加新点

2 个答案: