Skip to content Skip to sidebar Skip to footer

D3js Scatter Plot Auto Update Doesnt Work

Need some help figuring out how to auto update 3djs scatter plot. The code looks fine ,however, when the update function is running the graph gets updated but the scatter plot rem

Solution 1:

The first thing I did wrong was using the wrong d3js.. the following line has to be replaced

<scriptsrc="http://d3js.org/d3.v3.min.js"></script>

With the following or else svg.selectAll would not work.

<scripttype="text/javascript"src="http://d3js.org/d3.v3.js"></script>

Now, as far as the scatter plots update goes. I'm now using the code below which works fine with some databases. In my case it still does not work well and I'll be posting it as a sepearte question as stakoverflow guidlines requsts..

// ** Update data section (Called from the onclick)functionupdateData() {

// Get the data again
data = d3.json("2301data.php", function(error, data) {
data.forEach(function(d) {
    d.dtg = parseDate(d.dtg);
    d.temperature = +d.temperature;
   // d.hum = +d.hum; // Addon 9 part 3
});


// Scale the range of the data again 
 x.domain(d3.extent(data, function(d) { return d.dtg; }));
 y.domain([0, 60]); // Addon 9 part 4var svg = d3.select("#chart1")
 var circle = svg.selectAll("circle").data(data)

svg.select(".x.axis") // change the x axis
        .transition()
        .duration(750)
        .call(xAxis);
    svg.select(".y.axis") // change the y axis
        .transition()
        .duration(750)
        .call(yAxis);
    svg.select(".line")   // change the line
        .transition()
        .duration(750)
        .attr("d", valueline(data));

circle.transition()
        .duration(750)
        .attr("cx", function(d) { return x(d.dtg); })

    // enter new circles
    circle.enter()
        .append("circle")
        .filter(function(d) { return d.temperature > 30 })
        .style("fill", "red")   
        .attr("r", 3.5) 
        .attr("cx", function(d) { return x(d.dtg); })

    // remove old circles
    circle.exit().remove()


});
}

Post a Comment for "D3js Scatter Plot Auto Update Doesnt Work"