Venkat Venkat Venkat Venkat - 2 months ago 13
JSON Question

Auto refresh text d3js

I have requirement to auto refresh the text displayed using d3js. Source is a json file. I have below d3js code (based on mbostok's auto refresh code for chart). The text is not refreshing every time as its supposed to.

I tried to change values in the json file but found that the text displayed is not refreshing.
In the updateData(), i printed the value to console and its displaying correctly. Not sure why the text displayed is not showing correct values.

jsoncir.html

<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */

body { font: 12px Arial;}

path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}

.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}

</style>
<body>

<!-- load the d3.js library -->
<script src="http://d3js.org/d3.v3.min.js"></script>

<script>

// Set the dimensions of the canvas / graph
var margin = {top: 100, right: 20, bottom: 30, left: 50},
width = 900 - margin.left - margin.right,
height = 570 - margin.top - margin.bottom;


// Set the ranges
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear().range([height, 0]);



// Adds the svg canvas
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 + ")");

// Get the data
d3.json("final_json_file.json", function(error, data) {
data.forEach(function(d) {

d.close = d.cnt;


});


svg.selectAll("circle")
.data(data)
.enter().append("circle")
.attr("class", "point")
.attr("r", 40.5)
.attr("fill", "#BADBDA")


svg.selectAll("text")
.data(data)
.enter().append("text")
.attr("dx", 12)
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.text(function(d) { return d.close })


});



var inter = setInterval(function() {
updateData();
}, 12000);


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

// Get the data again
d3.json("final_json_file.json", function(error, data) {
data.forEach(function(d) {

d.close = d.cnt;

console.log(d.close);

});


// Select the section we want to apply our changes to
var svg = d3.select("body").transition();


// console.log('ehllo');

// Make the changes
svg.select("text") // change the line
.duration(12000)
.text(function(d) { return d.close +1});





});
}


</script>
</body>


input json file final_json_file.json

[{"cnt": 49976, "st_time": "2016-09-01"}]

Answer

You do not update bounded to text element. At first you bound data to elements using svg.selectAll("text").(data) but in updateData function you didn't update data. You should bind new data to elements and the update their texts.

// Select the section we want to apply our changes to
var svg = d3.select("body");

//    Make the changes
svg.selectAll("text")
  .data(data)
  .transition()
  .duration(1000)
  .text(function (d) {
    return d.close + 1
  });