Home/ Questions/Q 8854489
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T13:53:32+00:00

New to D3. I am trying to modify the simple bar chart example shown

  • 0

New to D3. I am trying to modify the simple bar chart example shown here. I’m trying to update the data but am missing something fundamental. I’m trying to follow along here, where Mike talks about object constancy. Specifically, I am trying to achieve the following in my code:

Key functions can be useful for improving performance independent of transitions. For example, if you filter a large table, you can use a key function to reduce the number of DOM modifications: reorder DOM elements in the update selection rather than regenerating them. We used this technique at Square to improve the performance of merchant analytics, and it’s one of the reasons that D3 is faster than most template frameworks.

(In my case, my key function is simply “.data(data)” (which is ok, according to this post)

My code below works, but I suspect isn’t the most performance friendly. For instance, frequency “70” is in both sets of data, but by “removing” the data, I am effectively redrawing it. (If I don’t “remove” the data first, then another chart is drawn, rather than the old chart just getting updated data). How do I modify the code below to adhere to the key function and so that data that exists in both datasets doesn’t get redrawn?

My code for the bar chart:

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.bar {
  fill: steelblue;
}

.x.axis path {
  display: none;
}

</style>
<body>

<button id="change" name="change">Update</button>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>


<script>
$(document).ready(function () { 
    var old_data = [{"letter": "A","frequency": "50"},
                {"letter": "B","frequency": "60"},
                {"letter": "C","frequency": "70"}, // this also appears in new_data
                {"letter": "D","frequency": "80"},
                ];


    draw_chart(old_data);

    $("#change").click(function(){

        var new_data = [{"letter": "A","frequency": "10"},
                        {"letter": "B","frequency": "20"},
                        {"letter": "C","frequency": "70"}, // this appears in old_data
                        {"letter": "D","frequency": "30"},
                        ];


        var bar = d3.select('body').selectAll('svg').remove();// delete this line and you'll get multiple charts rather than just updating the data in the original chart
        draw_chart(new_data);
    });
});

</script>


<script>
function draw_chart(data){

var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - 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");

var svg = d3.select("body").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 + ")");

  data.forEach(function(d) {
    d.frequency = +d.frequency;
  });

  x.domain(data.map(function(d) { return d.letter; }));
  y.domain([0, d3.max(data, function(d) { return d.frequency; })]);

  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")
      .text("Frequency");

  svg.selectAll(".bar")
      .data(data)
      .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.letter); })
      .attr("width", x.rangeBand())
      .attr("y", height)
      .attr("height","0")
      .transition()
      .delay(function(d, i) { return i*300 })
      .duration(1000) 
      .attr("y", function(d) { return y(d.frequency); })
      .attr("height", function(d) { return height - y(d.frequency); });
  }

</script>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    First, the reason why you have the line, 

    var bar d3.select('body')...remove() // delete this line and you'll get double...

    Is beacuse in your draw_chart your always appending to the page when it’s called. You need to change this line,

    var svg = d3.select("body").append("svg")

    to something that doesn’t continually append a new svg

    If I have more time i’ll take a look at the main question.

    • 0