Question

没有更新图表的运气，我可以用完整的数据集初始化它，尝试了很多例子。我首先尝试更新不断增加的数据集的X和Y轴刻度。最后，我实际上只想更新整个图表，包括数据点。所以可能有一种更简单的方法。

我希望push()只是data_set，并致电chart.update

var margin, x, y, valueline, div, svg, xAxis, yAxis;
var data_set = [
   {ser1: 0, ser2: 0}
];

初始化代码：

chart.init = function() {
    // set the dimensions and margins of the graph
    margin = {top: 20, right: 20, bottom: 20, left: 20},
        width = 860 - margin.left - margin.right,
        height = 400 - margin.top - margin.bottom;

    // set the ranges
    x = d3.scaleLinear().range([0,width]);
    y = d3.scaleLinear().range([height, 0]);

    // define the line
    valueline = d3.line()
        .x(function(d) { return x(d.ser1); })
        .y(function(d) { return y(d.ser2); });

    // Define the div for the tooltip
    div = d3.select("body").append("div")   
        .attr("class", "tooltip")               
        .style("opacity", 0);       

    // append the svg obgect to the body of the page
    // appends a 'group' element to 'svg'
    // moves the 'group' element to the top left margin
    svg = d3.select("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform",
              "translate(" + margin.left + "," + margin.top + ")");

    // format the data
    data_set.forEach(function(d) {
      d.ser1 =+ d.ser1;
      d.ser2 =+ d.ser2;
    });

    // Scale the range of the data
    x.domain([0, d3.max(data_set, function(d) { return d.ser1; })]);
    y.domain([0, d3.max(data_set, function(d) { return d.ser2; })]);

    // Add the valueline path.
    svg.append("path")
      .data([data_set])
      .attr("class", "line")
      .attr("d", valueline);

    // Add the X axis
    xAxis = d3.axisBottom().scale(x);   
    svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

    // Add the Y axis
    yAxis = d3.axisLeft().scale(y);
    svg.append("g")
       .call(yAxis);

    // Add data points and tool tips
    svg.selectAll(".dot")
    .data(data_set)
    .enter().append("circle") 
    .attr("class", "dot")
    .attr("cx", function(d, i) { return x(d.ser1) })
    .attr("cy", function(d) { return y(d.ser2) })
    .attr("r", 5)
    .on("mouseover", function(d) {      
        div.transition()        
            .duration(200)      
            .style("opacity", .9);      
        div .html("Ser1: "+d.ser1 + "<br/>Ser2: "+  + d.ser2)   
            .style("left", (d3.event.pageX) + "px")     
            .style("top", (d3.event.pageY - 28) + "px");    
        })                  
    .on("mouseout", function(d) {       
        div.transition()        
            .duration(500)      
            .style("opacity", 0);   
    });
}

更新代码：

chart.update = function() {
    // format the data
    data_set.forEach(function(d) {
      d.ser1 =+ d.ser1;
      d.ser2 =+ d.ser2;
    });

    // Scale the range of the data
    x.domain([0, d3.max(data_set, function(d) { return d.ser1; })]);
    y.domain([0, d3.max(data_set, function(d) { return d.ser2; })]);    

    // define the line
    valueline = d3.line()
        .x(function(d) { return x(d.ser1); })
        .y(function(d) { return y(d.ser2); });      


    // update try?
    var t = svg.transition().duration(750);

    yAxis.scale(y);
    t.select("g.y.axis").call(yAxis);

    xAxis.scale(x);
    t.select("g.x.axis").call(xAxis);

    svg.data(data_set);

    svg.select("g.y.axis")
      .attr("transform", "translate(0," + height + ")")
      .transition(t)
      .call(xAxis);

    svg.select("g.x.axis")
        .transition(t)
       .call(yAxis);


    /*
    // update no luck
    svg.data(data_set);

    var t = svg.transition().duration(750);

    xAxis.scale(x);
    t.select("g.x.axis").call(xAxis);

    var axis = d3.axisBottom().scale(x);
    d3.selectAll("g.x.axis")
        .transition(t)
        .call(axis)
    */
}

Answer 1

以下是我的表现：

1 在更新函数之外追加所有g元素，并为它们提供类名，以便您可以引用它们，例如：

svg.append("g")
  .attr("class","axis axis--y")

2 选择一个空类并附加该行并通过enter()圈出新数据，例如：

var line = svg.selectAll(".lineTest")
  .data([data],function(d){ return d.ser1 });

line = line
  .enter()
.append("path")
  .attr("class","lineTest")
  .merge(line);

line.transition()
  .duration(durations)
  .attr("d", valueline)

3 切换数据集：

data = d3.select('#selection')
      .property('value') == "First" ? data_set : data_set2

以下是您的代码的修改版本：Plunker

D3 v4转换或更新

1 个答案: