Обновление графика изменения данных в d3.js

Question

Обновление графика изменения данных в d3.js

0

hi Я использую следующий код, чтобы в принципе создать гистограмму, потребляя данные из служебного вызова. Проблема с этим связана с изменением данных из вызова службы, оно не отражается на гистограмме, оно остается в исходном состоянии. Appname и Appcount - это две вещи, которые я получаю от вызова службы

jQuery(function($) 
{
Appnames = []//array will be populated from service call,
  Appcount = []//array will be populated from serv'enter code here'ice call,
  chart,
  width = 700,
  bar_height = 40,
  gap = 2,
  height = bar_height * Appnames.length;
  var margin = {top: 20, right: 120, bottom: 20, left: 120};

  /* step 1 - create the background*/
  chart = d3.select($("#step-1")[0])
.append('svg')
.attr('class', 'chart')
.attr('width', width)
.attr('height', height);

  /* step 2 - create the bars*/
  var x, y;

 chart = d3.select($("#step-2")[0])
.append('svg')
.attr('class', 'chart')
.attr('width', width + margin.right + margin.left)
.attr('height', height);

 x = d3.scale.linear()
 .domain([0, d3.max(Appcount)])
 .range([0, width]);

 y = function(i) { return bar_height * i; }

 chart.selectAll("rect")
 .data(Appcount)
 .enter().append("rect")
 .attr("x", 0)
 .attr("y", function(d, i) { return y(i);})
 .attr("width", x)
 .attr("height", bar_height);

  /* step 3 - add counts to the bars*/
chart = d3.select($("#step-3")[0])
.append('svg')
.attr('class', 'chart')
.attr('width', width)
.attr('height', height);

 chart.selectAll("rect")
.data(Appcount)
.enter().append("rect")
.attr("x", 0)
.attr("y", function(d, i) { return y(i);})
.attr("width", x)
.attr("height", bar_height);

 chart.selectAll("text")
.data(Appcount)
.enter().append("text")
.attr("x", x)
.attr("y", function(d, i){ return y(i) + bar_height/2; } )
.attr("dx", -5)
.attr("dy", ".36em")
.attr("text-anchor", "end")
.text(String);

 /* step 4 - add Appnames to bars*/
 var left_width = 100;

chart = d3.select($("#step-4")[0])
.append('svg')
.attr('class', 'chart')
.attr('width', left_width + width)
.attr('height', height);

chart.selectAll("rect")
.data(Appcount)
.enter().append("rect")
.attr("x", left_width)
.attr("y", function(d, i) { return y(i);})
.attr("width", x)
.attr("height", bar_height);

chart.selectAll("text.score")
.data(Appcount)
.enter().append("text")
.attr("x", function(d) { return x(d) + left_width; })
.attr("y", function(d, i) { return y(i) + bar_height / 2;})
.attr("dx", -5)
.attr("dy", ".36em")
.attr("text-anchor", "end")
.attr('class', 'score')
.text(String);

 chart.selectAll("text.name")
.data(Appnames)
.enter().append("text")
.attr("x", left_width / 2)
.attr("y", function(d, i){ return y(i) +bar_height/2; } )
.attr("dy", ".36em")
.attr("text-anchor", "middle")
.attr('class', 'name')
.text(String);

 /* step 5 - add a ruler line to the bars*/
 var gap = 2, yRangeBand;
// redefine y for adjusting the gap
yRangeBand = bar_height + 2 * gap;
y = function(i) { return yRangeBand * i; };

chart = d3.select($("#step-5")[0])
.append('svg')
.attr('class', 'chart')
.attr('width', left_width + width + 40)
.attr('height', (bar_height + gap * 2) * Appnames.length + 30)
.append("g")
.attr("transform", "translate(10, 20)");

chart.selectAll("line")
.data(x.ticks(d3.max(Appcount)))
.enter().append("line")
.attr("x1", function(d) { return x(d) + left_width; })
.attr("x2", function(d) { return x(d) + left_width; })
.attr("y1", 0)
.attr("y2", (bar_height + gap * 2) * Appnames.length);

chart.selectAll(".rule")
.data(x.ticks(d3.max(Appcount)))
.enter().append("text")
.attr("class", "rule")
.attr("x", function(d) { return x(d) + left_width; })
.attr("y", 0)
.attr("dy", -6)
.attr("text-anchor", "middle")
.attr("font-size", 10)
.text(String);

 chart.selectAll("rect")
.data(Appcount)
.enter().append("rect")
.attr("x", left_width)
.attr("y", function(d, i) { return y(i) + gap; })
.attr("width", x)
.attr("height", bar_height);

 chart.selectAll("text.score")
.data(Appcount)
.enter().append("text")
.attr("x", function(d) { return x(d) + left_width; })
.attr("y", function(d, i) { return y(i) + yRangeBand/2;})
.attr("dx", -5)
.attr("dy", ".36em")
.attr("text-anchor", "end")
.attr('class', 'score')
.text(String);

 chart.selectAll("text.name")
.data(Appnames)
.enter().append("text")
.attr("x", left_width / 2)
.attr("y", function(d, i){ return y(i) + yRangeBand/2; } )
.attr("dy", ".36em")
.attr("text-anchor", "middle")
.attr('class', 'name')
.text(String); }(jQuery));

neha tj 27 сен. 2015, в 14:59

Источник

0

(jQuery)) с угловым?
Sajeetharan - MSFT 27 сен. 2015, в 12:46

Теги:

angularjs

d3.js

angularjs-scope

angular-services

1 ответ

Ещё вопросы

Mark · Accepted Answer · 2015-09-27T12-10-00.000Z

d3 использует шаблон ввода, обновления и выхода. Ваш код обрабатывает только состояние enter. Разделите его, чтобы обрабатывать все 3 состояния:

var rects = chart.selectAll("rect")
  .data(Appcount); //<-- create your data join

rects.enter().append("rect"); //<-- ENTER - when data enters the join append a rect element to dom

rects.exit().remove(); //<-- EXIT - when data leaves the join, remove the rect

rects.attr("x", 0) //<-- UPDATE - update the rects based on data
  .attr("y", function(d, i) { return y(i);})
  .attr("width", x)
  .attr("height", bar_height);