Динамическое обновление двух наборов данных с помощью d3. js древовидной карты - PullRequest
Новая
       74

Динамическое обновление двух наборов данных с помощью d3. js древовидной карты

0 голосов
/ 08 апреля 2020

Моя задача - переключить два набора данных с помощью d3. js treemap. Но теперь я могу это сделать, только если удаляю все существующие древовидные карты, как показано в следующем коде. Я также пытаюсь добавить treemap.sticky (false), но это не работает, и ошибка показывает, что «функция sticky () не определена».

Извините, я новичок в D3. js! Спасибо! 

d3.select("form").on("change", function() {
  switch(event.target.value) {
    case "a":
      d3.json(url1).then( function(data){
        svg.selectAll("g").remove();
        buildTreemap(data);
      });
      break;
    case "b":
      d3.json(url2).then( function(data){
        svg.selectAll("g").remove();
        buildTreemap(data);
      });
      break;
    default:
  }
});

d3.json(url1).then( function(data){
  buildTreemap(data);
});

function buildTreemap(data){
  console.log(data);

  root = d3.hierarchy(data)
    .sum(function(d) { return d.value; })
    .sort(function(a, b) { return b.height - a.height || b.value - a.value; });

  var treemap = d3.treemap()
    .size([width, height])
    .padding(1)
    .round(true);
  treemap(root);


  var cells = d3.select("svg")
  .selectAll("g")
  .data(root.leaves())
  .enter()
  .append("g")
  .attr("class", function(d) { return "node level-" + d.depth; })
  .attr("title", function(d) { return d.data.name ? d.data.name : "null"; })
  .attr("transform", function(d) { return "translate(" + (d.x0)/2 + "," + (d.y0) + ")"; });

  rect=cells.append("rect");
  rect.style("fill", function(d) {
      while(d.depth > 1) d = d.parent;
      return color(d.data.name);
    })
    .style("opacity", 0.7)
    .attr("width", 0)
    .attr("height", 0)
    .transition()
    .duration(1000)
    .attr("width", function(d) { 
      return (d.x1 - d.x0)/2; })
    .attr("height", function(d) { return (d.y1 - d.y0); });


  cells.append("text")
    .attr("text-anchor", "start")
    .attr("x", 5)
    .attr("dy", 30)
    .attr("width",cells.width)
    .attr("class", "node-label")
    .text(function (d) { return d.children ? null : (d.x1-d.x0)<130 ? null: d.data.name})
    .style("font-size",function(d){
      return (d.x1-d.x0)<110 ? 5+"px" : (d.x1-d.x0)<130 ? 10+"px" : 15+"px"})
    .style("width", function(d) { return (d.x1 - d.x0)/2; });
}
...