0

I'm trying to have a bar graph in my program update in a .change function, but I'm not quite sure on how to go with making that happen. I already have a line object changing, which was accomplished by changing the attribute. But the problem that I'm having is that I don't know how to go about updating the rectangles in a bar graph to reflect the changes. Here's the relevant code with my attempt:

//updates when slider changes
$("#myRange").change(function () {
    slider = $("#myRange").val();

    updateXs();
    updateLineData();
    displayVals();

    d3.select(".myLine").transition()
        .attr("d", lineFunc(lineData));
    d3.select(".myBars")
        .attr("y", function (d) {
            return d.value - d.y;
        });

});

And here's the full code: http://jsfiddle.net/tqj5maza/15/

gamehen
  • 324
  • 1
  • 5
  • 18
  • Is myBars a class? You might need to look at the code doing the selection. – Roland Heath Aug 04 '15 at 01:35
  • Oh, yeah myBars is a class for all of the bars in the stacked bar graph. – gamehen Aug 04 '15 at 01:46
  • Shouldn't it have a dot before it? If you're stepping through the code with breakpoints, put one at `return d.value - d.y;`. If you never reach it, your select is not finding anything, so that's likely part of the problem. – Roland Heath Aug 04 '15 at 01:57
  • I forgot to mention it, but I updated the jsfiddle before, but I forgot to update the code in here, so that's my bad as well – gamehen Aug 04 '15 at 02:05
  • @gamehen, see answer of http://stackoverflow.com/questions/31705453/update-real-time-d3-chart-by-socket-io/31726722#31726722 – Manuel J. Diaz Aug 04 '15 at 02:09
  • Hey @ManuelJ.Diaz, thanks for the link, which is really helpful, but what I wanted to know more primarily is how one would go about resetting/updating a stacked bar graph. – gamehen Aug 04 '15 at 02:26
  • See https://stackoverflow.com/questions/18186011/how-to-update-data-in-stack-bar-chart-in-d3 – Lars Kotthoff Aug 04 '15 at 03:19
  • Updating most D3 graphs, including a bar graph, follows the same steps: you need to update the scaling, the axes, the then update the graphical data. Take a closer look at the answer, since it is a complete walkthrough on how to do exactly that; the `Update` function is fully commented to help understand every step of the way. – Manuel J. Diaz Aug 04 '15 at 03:24
  • Okay, so from what I've seen I've gathered that updating is nearly the same as initializing the bars in the first place. I've tried that here: http://jsfiddle.net/1uo0xz93/, but for some reason I can't see any effect on the bar graph from the slider movement and the dev tools aren't pulling up any errors either. – gamehen Aug 04 '15 at 04:11
  • Your `data` array is not changing, as seen by adding a `console.log(data);` before your `bar` operations. Check that your above code is handling `data` correctly on slider update. You also need to rebind the data to the `rect` elements in `canvas`. Also, you had extraneous things -- you're not appending anything, so no `append`; you don't need `enter`, etc. Lastly, I think you meant to update the color of the bar. Use the `style` method with the `fill` attribute to to that instead of the `attr` method and `class` attribute. See http://jsfiddle.net/1uo0xz93/2/ that works. – Manuel J. Diaz Aug 05 '15 at 13:28
  • @ManuelJ.Diaz Thanks for the help! – gamehen Aug 05 '15 at 22:39

0 Answers0