Javascript D3正负更新数据

我试图显示一个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（）时，它第一次工作

---

但是在那之后，它不会改变任何东西。

如果你想要负的y值，你需要将域设置为包含负的值。现在，它看起来只有非负值。可能应该是这样的：

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

您可能还希望设置范围以控制点的结束位置，但这取决于您。请看这里：

至于更新不起作用，这将不起作用

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

---

这不会更新您的数据，它会将您的数据放入属性“d”中。你需要更新x和y。你有更新数据的例子吗？负片显示my-3，但该条不存在，我如何使这些条从0向上绘制为正，从0向下绘制为负？谢谢你的帮助，但我仍然不明白。-如果你能编辑你的答案并输入工作代码，我会勾选你的答案。如果你创建了一把小提琴，我会看一看。