Почему transition () не может работать, когда я использую d3. js для создания древовидной карты? - PullRequest
Новая
       47

Почему transition () не может работать, когда я использую d3. js для создания древовидной карты?

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

Я новичок в d3. js, и я нахожу некоторые проблемы. В этом проекте у меня есть два набора данных на локальном хосте, и я хочу отобразить их в древовидной карте. Просто зайдите на веб-страницу, первые данные могут отображаться нормально. если я проверил другой набор данных, во всплывающей подсказке могут отображаться правильные данные для этого набора данных. Но древовидная карта не может изменить свою ширину и высоту. Я не знаю, где ошибка. Следующая часть кода js. Спасибо за помощь в решении проблем. 

d3.select("form").on("change", function() {
  switch(event.target.value) {
    case "1":
      d3.json(url1).then( function(data){
        buildTreemap(data);
      });
      break;
    case "2":
      d3.json(url2).then( function(data){
        buildTreemap(data);
      });
      break;
    default:
  }
});

d3.json(url2).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);
   console.log(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) + ")"; })
  .on("mousemove", function (d) {
                    tool.style("left", d3.event.pageX + 10 + "px")
                    tool.style("top", d3.event.pageY - 20 + "px")
                    tool.style("display", "inline-block");
                    tool.html(d.children ? null : d.parent.data.name);
                }).on("mouseout", function (d) {
                    tool.style("display", "none");
                })
  ;

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

cells.selectAll("rect").transition().duration(750)
.style("width", function(d) { 
  return (d.x1 - d.x0)/2; })
  .style("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 );

}
...