Блог

Я хочу попытаться преобразовать эту силу из D3 v4 в v7, но не знаю, как это сделать.Преобразование кода, которое я сделал, находится здесь. Я пытаюсь это сделатьlt; » rel=»nofollow noreferrer»>https://observablehq.com/@d3/d3v6-migration-guidegt;gt;

D3 6.0 вышел! Он поставляется с захватывающими новыми функциями и улучшениями.

Он также вносит несколько важных изменений в API. Но не бойтесь: почти все методы ведут себя точно так же, как и в случае с v5; лишь немногие из них не совместимы с обратной совместимостью.

Вот полный список изменений, за которыми вам нужно будет следить при обновлении до D3 v6:

 !DOCTYPE htmlgt; lt;meta charset="utf-8"gt; lt;stylegt;  .links line {  stroke: #999;  stroke-opacity: 0.6; }  .nodes circle {  stroke: #fff;  stroke-width: 1.5px; }  text {  font-family: sans-serif;  font-size: 10px; }  lt;/stylegt; lt;svg width="500" height="500"gt;lt;/svggt; lt;script src="https://d3js.org/d3.v7.min.js"gt;lt;/scriptgt;  lt;scriptgt;  const svg = d3.select("svg"),  width =  svg.attr("width"),  height =  svg.attr("height");  const simulation = d3.forceSimulation()  .force("link", d3.forceLink().id(function(d) { return d.id; }))  .force("charge", d3.forceManyBody())  .force("center", d3.forceCenter(width/3, height / 3));  d3.json("helpme.json", function(error, graph) {  if (error) throw error;   const link = svg.append("g")  .attr("class", "links")  .selectAll("line")  .data(graph.links)  .enter().append("line")  .attr("stroke-width", function(d) { return Math.sqrt(d[2])*2; });   const node = svg.append("g")  .attr("class", "nodes")  .selectAll("g")  .data(graph.nodes)  .enter().append("g")   const circles = node.append("circle")  .attr("r", 6)  .attr("fill", "olive");   // Create a drag handler and append it to the node object instead  const drag_handler = d3.drag()  .on("start", dragstarted)  .on("drag", dragged)  .on("end", dragended);   drag_handler(node);    const lables = node.append("text")  .text(function(d) {  return d.id;  })  .attr('x', 6)  .attr('y', 3);   node.append("title")  .text(function(d) { return d.id; });   simulation  .nodes(graph.nodes)  .on("tick", ticked);   simulation.force("link")  .links(graph.links);   function ticked() {  link  .attr("x1", function(d) { return d.source.x; })  .attr("y1", function(d) { return d.source.y; })  .attr("x2", function(d) { return d.target.x; })  .attr("y2", function(d) { return d.target.y; });   node  .attr("transform", function(d) {  return "translate("   d.x   ","   d.y   ")";  })  } });    function dragstarted(event,d) {  if (!event.active) simulation.alphaTarget(0.3).restart();  d.fx = d.x;  d.fy = d.y; }  function dragged(event,d) {  d.fx = event.x;  d.fy = event.y; }  function dragended(event,d) {  if (!event.active) simulation.alphaTarget(0);  d.fx = null;  d.fy = null; }  lt;/scriptgt;  

помогите мне.json

  {  "nodes": [  {"id": "A"},  {"id": "B"},  {"id": "C"},  {"id": "D"},  {"id": "E"},  {"id": "F"}  ],  "links": [  {"source": "C", "target": "B", "value": 2},  {"source": "C", "target": "D", "value": 3},  {"source": "D", "target": "A", "value": 1},  {"source": "D", "target": "E", "value": 1},  {"source": "E", "target": "F", "value": 1},  {"source": "F", "target": "B", "value": 4}  ] }  

Может кто-нибудь, пожалуйста, помочь мне это исправить?Некоторая помощь была бы потрясающей! Danke in Voraus