D3正負更新數據

Question

我想顯示一個D3正負值的條形圖，但我不能讓域顯示兩者？

我也想告訴圖形基於當前的數據繪製後，我已經更新它，但它不會更新？

這是我的代碼

var margin = {top: 20, right: 20, bottom: 30, left: 40}, 
    width = 370 - margin.left - margin.right, 
    height = 220 - margin.top - margin.bottom; 

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

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

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

var yAxis = d3.svg.axis() 
    .scale(y) 
    .orient("left"); 

function updateBarGraph() { 
    var dataForGraph3 = [ 
     { 
      "asset": "1", 
      "value": val1 
     }, 
     { 
      "asset": "2", 
      "value": val2 
     }, 
     { 
      "asset": "3", 
      "value": val3 
     }, 
     { 
      "asset": "4", 
      "value": val4 
     } 
    ]; 
    console.log("updateBarGraph"); 
    console.log(dataForGraph3); 

    x.domain(dataForGraph3.map(function(d) { return d.asset; })); 
    y.domain([0, d3.max(dataForGraph3, function(d) { return d.value; })]); 

    var svg = d3.select(".expReturnBar").transition(); 

    svg.select(".bar") // change the line 
     .duration(750) 
     .attr("d", dataForGraph3); 
    svg.select(".x.axis") // change the x axis 
     .duration(750) 
     .call(xAxis); 
    svg.select(".y.axis") // change the y axis 
     .duration(750) 
     .call(yAxis); 
}; 

function drawBarGraph() { 

    var dataForGraph3 = [ 
     { 
      "asset": "1", 
      "value": val1 
     }, 
     { 
      "asset": "2", 
      "value": val2 
     }, 


{ 
     "asset": "3", 
     "value": val3 
    }, 
    { 
     "asset": "4", 
     "value": val4 
    } 
]; 
console.log("drawBarGraph"); 
    console.log(dataForGraph3); 

var svg = d3.select(".expReturnBar").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.domain(dataForGraph3.map(function(d) { return d.asset; })); 
y.domain([0, d3.max(dataForGraph3, function(d) { return d.value; })]); 

svg.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(xAxis); 

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

svg.selectAll(".bar") 
    .data(dataForGraph3) 
.enter().append("rect") 
    .attr("class", "bar") 
    .attr("x", function(d) { return x(d.asset); }) 
    .attr("width", x.rangeBand()) 
    .attr("y", function(d) { return y(d.value); }) 
    .attr("height", function(d) { return height - y(d.value); }); 

function type(d) { 
    d.value = +d.value; 
    return d; 
} 

$scope.drawn = true; 
}; 

$scope.drawn = false; 
function drawGraphs() { 
    if(!$scope.drawn) 
     drawBarGraph(); 
    else 
     updateBarGraph(); 
} 

$scope.update = function(){ 
    val1 = val1 + 10; 
    val2 = val2 + 10; 
    val3 = val3 + 10; 
    val4 = val4 + 10; 

    drawGraphs(); 
} 

當我調用update（），第一次它的工作原理。

但後來它並沒有改變任何東西。

Answer 1

如果您想要負y值，則需要將該域設置爲包含負值。現在，它看起來只有非負值。它可能應該是這樣的：

y.domain([d3.min(dataForGraph3, function(d) { return d.value; }), d3.max(dataForGraph3, function(d) { return d.value; })]); 

您可能還想設置範圍來控制點的最終位置，但這取決於您。看看這裏：https://github.com/mbostock/d3/wiki/Quantitative-Scales

至於更新不起作用，這將無法正常工作。

svg.select(".bar") // change the line 
    .duration(750) 
    .attr("d", dataForGraph3); 

這不會更新您的數據，它會將您的數據放入屬性「d」。你需要更新x和y。