Данные не отображаются на радиальной дендрограмме - PullRequest
Новая
       15

Данные не отображаются на радиальной дендрограмме

1 голос
/ 08 мая 2019

Я пытаюсь использовать радиальную дендрограмму для отображения моих данных на нем.но он не показывает никаких данных о нем.https://observablehq.com/@d3/radial-dendrogram

Я создал файл HTML и javascript, в котором я использую вышеуказанный код ссылки.Но ничего не отображается.когда я удаляю последнюю часть кода, т.е. svg.remove что-то показывает в углу, но немного.Пожалуйста, направьте меня, как это будет работать?

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <title>Minimal D3 Example</title>
   <script src="https://d3js.org/d3.v5.js" charset="utf-8"></script>
   <script src="https://d3js.org/d3-hierarchy.v1.min.js"></script>
   <script src="https://d3js.org/d3-path.v1.min.js"></script>
   <script src="https://d3js.org/d3-shape.v1.min.js"></script>
   <script>
       var tree = d3.tree();
   </script>
</head>
<body>
 <h1>This is a Test Graph</h1>
 <script src="data.js" charset="utf-8"></script>
 <script src="code.js" charset="utf-8"></script>
 </body>
</html>

const root = tree(d3.hierarchy(data)
  .sort((a, b) => (a.height - b.height) ||    
  a.data.name.localeCompare(b.data.name)));

const svg = d3.select("body")
  .append("svg")
  .attr("width", "932")
  .attr("height", "932")
  .style("padding", "10px")
  .style("box-sizing", "border-box")
  .style("font", "10px sans-serif");

const g = svg.append("g");

const link = g.append("g")
  .attr("fill", "none")
  .attr("stroke", "#555")
  .attr("stroke-opacity", 0.4)
  .attr("stroke-width", 1.5)
.selectAll("path")
.data(root.links())
.enter().append("path")
  .attr("d", d3.linkRadial()
      .angle(d => d.x)
      .radius(d => d.y));

const node = g.append("g")
  .attr("stroke-linejoin", "round")
  .attr("stroke-width", 3)
.selectAll("g")
.data(root.descendants().reverse())
.enter().append("g")
  .attr("transform", d => `
    rotate(${d.x * 180 / Math.PI - 90})
    translate(${d.y},0)
  `);

node.append("circle")
  .attr("fill", d => d.children ? "#555" : "#999")
  .attr("r", 2.5);

node.append("text")
  .attr("dy", "0.31em")
  .attr("x", d => d.x < Math.PI === !d.children ? 6 : -6)
  .attr("text-anchor", d => d.x < Math.PI === !d.children ? "start" : 
"end")
  .attr("transform", d => d.x >= Math.PI ? "rotate(180)" : null)
  .text(d => d.data.name)
  .filter(d => d.children)
  .clone(true).lower()
  .attr("stroke", "white");

 document.body.appendChild(svg.node());

 const box = g.node().getBBox();


 svg.remove()
 .attr("width", box.width)
 .attr("height", box.height)
 .attr("viewBox", `${box.x} ${box.y} ${box.width} ${box.height}`);

1 Ответ

1 голос
/ 09 мая 2019

Я заметил, что в вашем коде отсутствуют несколько переменных: tree, radius и height.

Не забудьте включить их в свой файл javascript, так как они необходимы для рендеринга дерева. Вы можете заменить значение, которое я дал для width, на любое другое значение, подходящее для вашего варианта использования. Кроме того, вы не включили никаких данных для дерева для рендеринга. 

const width = 932;
const radius = width / 2;
const tree = d3.cluster().size([2 * Math.PI, radius - 100]);

Кроме того, вы можете удалить этот кусок кода, так как он не нужен. 

// remove the below 

document.body.appendChild(svg.node());

const box = g.node().getBBox();


svg.remove()
 .attr("width", box.width)
 .attr("height", box.height)
 .attr("viewBox", `${box.x} ${box.y} ${box.width} ${box.height}`);

Вы можете обратиться к демонстрации по здесь . Я использовал данные https://observablehq.com/@d3/radial-dendrogram для рендеринга дендрограммы.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...