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);

这不会更新您的数据，它会将您的数据放入属性＆＃34; d＆＃34;。您需要更新x和y。

D3正面负面更新数据

1 个答案: