d3js 차트 전환이 제대로 작동하지 않습니다.

Question

첨부 된 JSFiddle의 차트 전환 중에 막대가 제대로 새로 고쳐지지 않는 이유를 알 수 없습니다.

"CLICK ME"를 몇 번 클릭하면 DATA1이 선택되면 (예 : x 값이 13에서 19) 막대가 나타나지 않습니다. 차트를 무작위로 선택하여 각기 다른 수의 x 값을 갖는 자체 새로 고침에 사용할 데이터 세트가 3 개 있습니다.

나를 이해할 수 있도록 도와 줄 사람이 있습니까? 미리 감사드립니다.

코드 :

var data; 

var margin = { 
    top: 20, 
    right: 80, 
    bottom: 30, 
    left: 50 
}, 
width = 838 - margin.left - margin.right, 
    height = 300 - margin.top - margin.bottom; 

var x = d3.scale.ordinal() 
    .rangeRoundBands([0, width], 0.05); 

var yL = d3.scale.linear() 
    .range([height, 0]); 

var yR = d3.scale.linear() 
    .range([height, 0]); 

var xAxis = d3.svg.axis() 
    .scale(x) 
    .orient("bottom"); 

var yAxisL = d3.svg.axis() 
    .scale(yL) 
    .orient("left") 
    .ticks(10); 

var yAxisR = d3.svg.axis() 
    .scale(yR) 
    .orient("right") 
    .ticks(10); 

var EfficiencyLine = d3.svg.line() 
    .interpolate("basis") 
    .x(function (d) { 
    return x(d.xaxis); 
}) 
    .y(function (d) { 
    return yR(d.max_efficiency); 
}); 

var tip = d3.tip() 
    .attr('class', 'd3-tip') 
    .offset([-10, 0]) 
    .html(function (d) { 
    return "<strong>Energy:</strong> <span class='tt-text'>" + d.max_energy + "</span><br /><strong>Efficiency:</strong> <span class='tt-text'>" + d.max_efficiency + "</span>"; 
}) 

var svg = d3.select("#daychart") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

svg.call(tip); 

var which_data = Math.floor(Math.random() * 3) + 1 
switch (which_data) { 
    case 1: 
     data = data1; 
     break; 
    case 2: 
     data = data2; 
     break; 
    case 3: 
     data = data3; 
     break; 
    default: 
}; 

//d3.json("http://10.0.0.13/sma/sma-php/inverterdata.php?var=CDAY&id=C1200031", function (error, data) { 
data.forEach(function (d) { 
    d.max_energy = +d.max_energy; 
    d.max_efficiency = +d.max_efficiency; 
}); 

x.domain(data.map(function (d) { 
    return d.xaxis; 
})); 
yL.domain([0, d3.max(data, function (d) { 
    return d.max_energy; 
})]); 

yR.domain([0, d3.max(data, function (d) { 
    return d.max_efficiency; 
})]); 

svg.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(xAxis) 
    .append("text") 
    .attr("transform", "rotate(0)") 
    .attr("y", 23) 
    .attr("x", 340) 
    .attr("dy", ".71em") 
    .style("text-anchor", "bottom") 
    .text("Timeline"); 

svg.append("g") 
    .attr("class", "y-l axis") 
    .call(yAxisL) 
    .append("text") 
    .attr("transform", "rotate(-90)") 
    .attr("y", -50) 
    .attr("x", -145) 
    .attr("dy", ".71em") 
    .style("text-anchor", "top") 
    .text("Energy - KWh"); 

svg.append("g") 
    .attr("class", "y-r axis") 
    .attr("transform", "translate(" + width + " ,0)") 
    .call(yAxisR) 
    .append("text") 
    .attr("y", 50) 
    .attr("x", -160) 
    .attr("transform", "translate(" + width + " ,0)") 
    .attr("transform", "rotate(-90)") 
    .attr("dy", ".71em") 
    .style("text-anchor", "top") 
    .text("Efficiency - KWh/KW"); 

svg.selectAll(".bar") 
    .data(data) 
    .enter().append("rect") 
    .on('mouseover', tip.show) 
    .on('mouseout', tip.hide) 
    .attr("class", "bar") 
    .attr("x", function (d) { 
    return x(d.xaxis); 
}) 
    .attr("width", x.rangeBand()) 
    .attr("y", function (d) { 
    return yL(d.max_energy); 
}) 
    .transition().delay(function (d, i) { 
    return i * 10; 
}) 
    .duration(10) 
    .attr("height", function (d) { 
    return height - yL(d.max_energy); 
}); 

svg.append("path") 
    .attr("d", EfficiencyLine(data)) 
    .attr("class", "EfficiencyLine"); 

/* //Create labels 
svg.selectAll("text.label") 
    .data(data) 
    .enter() 
    .append("text") 
    .attr("class", "label") 
    .text(function (d) { 
    if (d.max_energy == 0) { 
     return ""; 
    } else { 
     return parseFloat(Math.round(d.max_energy * 100)/100).toFixed(1); 
    }; 
}) 
    .attr("x", function (d) { 
    return x(d.xaxis) + x.rangeBand()/2; 
}) 
    .attr("y", function (d) { 
    return yL(d.max_energy) - 2; 
}) 
    .attr("text-anchor", "middle") 
    .attr("font-family", "sans-serif") 
    .attr("font-size", "11px") 
    .attr("fill", "black"); 
*/ 
//}); 

//On click, update with new data    
d3.select("p").on("click", function() { 

    var which_data = Math.floor(Math.random() * 3) + 1 
    switch (which_data) { 
     case 1: 
      data = data1; 
      break; 
     case 2: 
      data = data2; 
      break; 
     case 3: 
      data = data3; 
      break; 
     default: 
    }; 

    // Get the data again 
    //  d3.json("http://10.0.0.13/sma/sma-php/inverterdata.php?var=PDAY&id=P100023", function (error, data) { 
    data.forEach(function (d) { 
     d.max_energy = +d.max_energy; 
     d.max_efficiency = +d.max_efficiency; 
    }); 

    // Scale the range of the data again 
    x.domain(data.map(function (d) { 
     return d.xaxis; 
    })); 
    yL.domain([0, d3.max(data, function (d) { 
     return d.max_energy; 
    })]); 
    yR.domain([0, d3.max(data, function (d) { 
     return d.max_efficiency; 
    })]); 

    svg.select("g.x").call(xAxis); 
    svg.select("g.y-l").call(yAxisL); 
    svg.select("g.y-r").call(yAxisR); 

    // Make the changes 
    svg.selectAll(".bar") // change the bar 
    .data(data) // Update the data within. 
    .transition().delay(function (d, i) { 
     return i/data.length * 1000; 
    }) 
     .duration(500) 
     .attr("x", function (d) { 
     return x(d.xaxis); 
    }) 
     .attr("y", function (d) { 
     return yL(d.max_energy); 
    }) 
     .attr("width", x.rangeBand()) 
     .attr("height", function (d) { 
     return height - yL(d.max_energy); 
    }); 

    svg.selectAll("path.EfficiencyLine") // change the EfficiencyLine 
    .data(data) // Update the data within. 
    .transition().delay(function (d, i) { 
     return i/data.length * 1000; 
    }) 
     .duration(500) 
     .attr("d", EfficiencyLine(data)); 

/* svg.selectAll("text.label") 
     .data(data) 
     .transition().delay(function (d, i) { 
     return i/data.length * 1000; 
    }) 
     .duration(500) 
     .text(function (d) { 
     if (d.max_energy == 0) { 
      return ""; 
     } else { 
      return parseFloat(Math.round(d.max_energy * 100)/100).toFixed(1); 
     }; 
    }) 
     .attr("x", function (d) { 
     return x(d.xaxis) + x.rangeBand()/2; 
    }) 
     .attr("y", function (d) { 
     return yL(d.max_energy) - 2; 
    }) 
*/ 
    //}); 

}); 

Answer 1

데이터 세트는 서로 다른 크기만큼 당신은뿐만 아니라 당신의 업데이트 기능에 .enter() 및 .exit()의 선택을 취급해야합니다

var sel = svg.selectAll(".bar") // change the bar 
    .data(data); 
sel.exit().remove(); 
sel.enter().append("rect") 
.on('mouseover', tip.show) 
.on('mouseout', tip.hide) 
.attr("class", "bar"); 

sel.transition().delay(function (d, i) { 
    return i/data.length * 1000; 
})... 

전체 예제 here.