Question

我试图通过更改菜单从绘图过渡到绘图。我的菜单包括从数据集中提取的新列（要素：y轴），我想在x / y轴上重新绘制带有新点的绘图。但是，我的代码不会删除以前的情节，但继续在旧情节下添加额外的情节。如何制作以下代码以延迟过渡图而不是在下面添加新图？

感谢，

var cValue = function(d) { return d[cVar];},
color = d3.scale.category10();

// add the tooltip area to the webpage
var tooltip = d3.select("body").append("div")
            .attr("class", "tooltip")
            .style("opacity", 0);


// force data to update when menu is changed    
var menu = d3.select("#menu select")
    .on("change", change);

// load data
d3.csv("sample_data.csv", function(error, data) {
  formatted = data;
  redraw();
});


d3.select(window)
    .on("keydown", function() { altKey = d3.event.altKey; })
    .on("keyup", function() { altKey = false; });
var altKey;


// set terms of transition that will take place
// when a new indicator is chosen   
function change() {
  d3.transition()
      .duration(altKey ? 7500 : 1500)
      .each(redraw)
}

    function redraw() {
  // setup x 
  var xValue = function(d) { return d[xVar];}, // data -> value
      xScale = d3.scale.ordinal()
                 .rangeRoundBands([0,width],1),  //value -> display
      xMap = function(d) { return (xScale(xValue(d)) + Math.random()*10);},   // data -> display
      xAxis = d3.svg.axis().scale(xScale).orient("bottom");

// setup y
   var yVar = menu.property("value"),
      yValue = function(d) { return d[yVar];}, // data -> value
      yMap = function(d) { return yScale(yValue(d));}, // data -> display
      yScale = d3.scale.linear().range([height, 0]), // value -> display
      yAxis = d3.svg.axis().scale(yScale).orient("left");

  data = formatted.filter(function(d, i) 
  { 
          if (d[cVar] == Prod) 
          { 
              //console.log(d);
              return d; 
          } 
  });
  //console.log(yVar)

  // change string (from CSV) into number format
  data.forEach(function(d) {
    d[xVar] = d[xVar];
    d[yVar] = +d[yVar];
  });

   xScale.domain(data.sort(function(a, b) { return d3.ascending(a[xVar], b[xVar])})
                .map(xValue) );
  // don't want dots overlapping axis, so add in buffer to data domain
  yScale.domain([d3.min(data, yValue)-1, d3.max(data, yValue)+1]);

// add the graph canvas to the body of the webpage
  var svg = d3.select("body").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 + ")");

  // x-axis
  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
    .append("text")
      .attr("class", "label")
      .attr("x", width)
      .attr("y", -6)
      .style("text-anchor", "end")
      .text(xVar);

  // y-axis
  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("class", "label")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text(yVar);

  // draw dots
  svg.selectAll(".dot")
      .data(data)
      .enter().append("circle")
      .attr("class", "dot")
      .attr("r", radius)
      .attr("cx", xMap)
      .attr("cy", yMap)
      .style("fill", function(d) { return color(cValue(d));}) 
      .on("mouseover", function(d) {
          tooltip.transition()
               .duration(200)
               .style("opacity", .9);
          tooltip.html(d[SN] + "<br/> (" + xValue(d) 
          + ", " + yValue(d) + ")")
               .style("left", (d3.event.pageX + 5) + "px")
               .style("top", (d3.event.pageY - 28) + "px");
      })
      .on("mouseout", function(d) {
           tooltip.transition()
               .duration(500)
               .style("opacity", 0);
      });
};

Answer 1

我找到了一种方法来回答这个问题。在菜单选择的每次通话中，我都可以重置＆＃34; svg＆＃34;使用＆＃34; svg.remove（）＆＃34;并致电＆＃34; draw（）＆＃34;。但它会重绘整个图，包括x轴/ y轴/图例/点。这不完全是我想做的事情，但是，这将暂时解决它，我可以继续前进。

如何通过选择D3中的菜单删除旧图并转换到新图

1 个答案: