Javascript D3简单条形图未更新_Javascript_D3.js_Svg

Javascript D3简单条形图未更新

javascript d3.js svg

Javascript D3简单条形图未更新,javascript,d3.js,svg,Javascript,D3.js,Svg,我已经创建了一个D3条形图，但我不确定如何更新它。数据本身正在更新，但当我尝试运行.enter（）和.exit（）这两个函数时，通常会出现不同的错误，即我的.exit（）函数不存在。我的观点是，我不确定更新图表svg的正确方法我已经提供了一个示例，但所有相关代码如下 var b_margin = {top: 20, right: 20, bottom: 30, left: 100}, b_width = 450 - b_margin.left - b_margin.right,

我已经创建了一个D3条形图，但我不确定如何更新它。数据本身正在更新，但当我尝试运行

.enter（）

和

.exit（）

这两个函数时，通常会出现不同的错误，即我的

.exit（）

函数不存在。我的观点是，我不确定更新图表svg的正确方法

我已经提供了一个示例，但所有相关代码如下

var b_margin = {top: 20, right: 20, bottom: 30, left: 100},
        b_width = 450 - b_margin.left - b_margin.right,
        b_height = 200 - b_margin.top - b_margin.bottom;

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

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

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

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

    var barsvg = d3.select("body").append("svg")
        .attr("width", b_width + b_margin.left + b_margin.right)
        .attr("height", b_height + b_margin.top + b_margin.bottom)
      .append("g")
        .attr("transform", "translate(" + b_margin.left + "," + b_margin.top + ")");

createBarChart = function()
{
  x.domain(bardata.map(function(d) { return d.age; }));
  y.domain([0, d3.max(bardata, function(d) { return d.population; })]);

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

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

  barsvg.selectAll(".bar")
      .data(bardata)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.age) + 25; })
      .attr("width", x.rangeBand() - 50)
      .attr("y", function(d) { return y(d.population); })
      .attr("height", function(d) { return b_height - y(d.population); });

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

updateBarChart = function()
{
  // Bar chart svg update
  bardata = [
    {age: "title1", population: 50},
    {age: "title2", population: 25},
    {age: "title3", population: 70}
  ]

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

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

  barsvg.selectAll(".bar")
      .data(bardata)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.age) + 25; })
      .attr("width", x.rangeBand() - 50)
      .attr("y", function(d) { return y(d.population); })
      .attr("height", function(d) { return b_height - y(d.population); });

  barsvg.exit().remove();

  barsvg.attr("y", function(d) { return y(d.value); })
        .attr("height", function(d) { return height - y(d.value); });
}

编辑：我的updateBarData函数如下所示：

非常棒的教程

其思想是，首先创建一个空的选择并将数据绑定到它

var bars = barsvg.selectAll(".bar")
.data(bardata)  // bars is empty but data is binded to it

现在，我们需要根据附加的数据创建元素

var newBars = bars.enter();  // creates new elements
newBars.apped("rect").........  // we do all the manipulation here

要删除旧元素，我们使用退出选择

var obsoletebars = bars.exit(); //contains excess bars
obsoletebars.remove(); // removes them

希望这有帮助。 var b_margin={top:20，right:20，bottom:30，left:100}， b_宽度=450-b_边距。左-b_边距。右， b_高度=200-b_边距.顶部-b_边距.底部； var x=d3.scale.ordinal（） .rangeRoundBands（[0，b_宽度]，.1）；变量y=d3.scale.linear（） .范围（[b_高度，0]）； var xAxis=d3.svg.axis（） .比例（x） .东方（“底部”）； var yAxis=d3.svg.axis（） .比例（y） .东方（“左”）； var barsvg=d3.select（“body”）.append（“svg”） .attr（“宽度”，b_宽度+b_边距。左+b_边距。右） .attr（“高度”，b_高度+b_边距。顶部+b_边距。底部） .附加（“g”） .attr（“变换”、“平移”（+b_margin.left+）、“+b_margin.top+”）； var bardata=[ {年龄：“公众”，人口：50}， {年龄：“私人，营利性”，人口：100}， {年龄：“非营利”，人口：25} ]; createBarChart（）； $（'#btn'）。单击（函数（）{ updateBarChart（）； }); 函数createBarChart（） { x、域（bardata.map（函数（d）{返回d.age；}））； y、域（[0，d3.max（bardata，函数（d）{返回d.population；}）]； barsvg.append（“g”） .attr（“类”、“x轴”） .attr（“变换”、“平移（0，+b_高度+”）） .呼叫（xAxis）； barsvg.append（“g”） .attr（“类”、“y轴”） .呼叫（yAxis） .append（“文本”） .attr（“变换”、“旋转（-90）”） .attr（“y”，6） .attr（“dy”，“.71em”） .style（“文本锚定”、“结束”） .文本（“频率”）； barsvg.selectAll（“.bar”） .数据（bardata） .enter（）.append（“rect”） .attr（“类”、“条”） .attr（“x”，函数（d）{返回x（d.age）+25；}） .attr（“宽度”，x.rangeBand（）-50） .attr（“y”，函数（d）{返回y（d.population）；}） .attr（“高度”，函数（d）{返回b_高度-y（d.总体）；}）；功能类型（d）{ d、人口=+d.人口；返回d； } } 函数updateBarChart（） { var random=function（）{return Math.floor（Math.random（）*70）+30}； //条形图svg更新巴达塔=[ {年龄：“公共”，人口：random（）}， {年龄：“私人，营利性”，人口：random（）}， {年龄：“非营利”，人口：random（）} ]; barsvg.append（“g”） .attr（“类”、“x轴”） .attr（“变换”、“平移（0，+b_高度+”）） .呼叫（xAxis）； barsvg.append（“g”） .attr（“类”、“y轴”） .呼叫（yAxis） .append（“文本”） .attr（“变换”、“旋转（-90）”） .attr（“y”，6） .attr（“dy”，“.71em”） .style（“文本锚定”、“结束”） .文本（“频率”）； var bar=barsvg.selectAll（“.bar”） .数据（bardata）； bar.enter（）.append（“rect”） .attr（“类”、“条”） .attr（“x”，函数（d）{返回x（d.age）+25；}） .attr（“宽度”，x.rangeBand（）-50） .attr（“y”，函数（d）{返回y（d.population）；}） .attr（“高度”，函数（d）{返回b_高度-y（d.总体）；}）； bar.exit（）.remove（）； bar.attr（“y”，函数（d）{ 返回y（d.总体）；}） .attr（“高度”，函数（d）{返回b_高度-y（d.总体）；}）； }

#btn{
边框：2个实心#212121；
宽度：150px；
文本对齐：居中；
填充：15px；
光标：指针；
}


更新

精彩教程

其思想是，首先创建一个空的选择并将数据绑定到它

var bars = barsvg.selectAll(".bar")
.data(bardata)  // bars is empty but data is binded to it

现在，我们需要根据附加的数据创建元素

var newBars = bars.enter();  // creates new elements
newBars.apped("rect").........  // we do all the manipulation here

要删除旧元素，我们使用退出选择

var obsoletebars = bars.exit(); //contains excess bars
obsoletebars.remove(); // removes them