vue + d3 svg 未显示

Question

我正在尝试复制可用的示例图表（可缩放圆形包装）此处。我正在使用以下版本将其部署在 vue 应用程序中

   "vue": "^2.6.14",
   "chart.js": "^2.9.4",
   "vue-chartjs": "^3.5.1",
   "vue-router": "^3.0.1",
   "vuex": "^3.6.2",
   "d3" : "6.7.0"

我有许多页面已经在工作，但是我无法显示此 d3 图表。

<template>
  <div class="container">

  </div>
</template>
<script>
import * as d3 from "d3";

export default {
 name: "FrictionAnalysis",
 data () {
  return {}
},
mounted() {
//    data = d3.json("./mockdata/flare-2.json");
// Specify the chart’s dimensions.
const width = 928;
const height = width;


 let data = {
 "name": "flare",
 "children": [
 {
  "name": "analytics",
  "children": [
   {
   "name": "cluster",
   "children": [
   {"name": "AgglomerativeCluster", "value": 3938},
   {"name": "CommunityStructure", "value": 3812},
   {"name": "HierarchicalCluster", "value": 6714},
   {"name": "MergeEdge", "value": 743}
    ] 
   },
  {
 "name": "graph",
 "children": [
  {"name": "BetweennessCentrality", "value": 3534},
  {"name": "LinkDistance", "value": 5731},
  {"name": "MaxFlowMinCut", "value": 7840},
  {"name": "ShortestPaths", "value": 5914},
  {"name": "SpanningTree", "value": 3416}
 ]
},
{
  "name": "optimization",
  "children": [
   {"name": "AspectRatioBanker", "value": 7074}
  ]
 }
 ]
},
{
 "name": "animate",
 "children": [
  {"name": "Easing", "value": 17010},
  {"name": "FunctionSequence", "value": 5842},
  {
   "name": "interpolate",
  "children": [
  {"name": "ArrayInterpolator", "value": 1983},
  {"name": "ColorInterpolator", "value": 2047},
  {"name": "DateInterpolator", "value": 1375},
  {"name": "Interpolator", "value": 8746},
  {"name": "MatrixInterpolator", "value": 2202},
  {"name": "NumberInterpolator", "value": 1382},
  {"name": "ObjectInterpolator", "value": 1629},
  {"name": "PointInterpolator", "value": 1675},
  {"name": "RectangleInterpolator", "value": 2042}
 ]
},
{"name": "ISchedulable", "value": 1041},
{"name": "Parallel", "value": 5176},
{"name": "Pause", "value": 449},
{"name": "Scheduler", "value": 5593},
{"name": "Sequence", "value": 5534},
{"name": "Transition", "value": 9201},
{"name": "Transitioner", "value": 19975},
{"name": "TransitionEvent", "value": 1116},
{"name": "Tween", "value": 6006}
 ]
}
]
}

// Create the color scale.
const color = d3.scaleLinear()
  .domain([0, 5])
  .range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"])
  .interpolate(d3.interpolateHcl);

// Compute the layout.
const pack = data => d3.pack()
  .size([width, height])
  .padding(3)
 (d3.hierarchy(data)
  .sum(d => d.value)
  .sort((a, b) => b.value - a.value));
 const root = pack(data);

// Create the SVG container.
const svg = d3.create("svg")
  .attr("viewBox", `-${width / 2} -${height / 2} ${width} ${height}`)
  .attr("width", width)
  .attr("height", height)
  .attr("style", `max-width: 100%; height: auto; display: block; margin: 0 -14px; 
background: ${color(0)}; cursor: pointer;`);

// Append the nodes.
 const node = svg.append("g")
.selectAll("circle")
.data(root.descendants().slice(1))
.join("circle")
  .attr("fill", d => d.children ? color(d.depth) : "white")
  .attr("pointer-events", d => !d.children ? "none" : null)
  .on("mouseover", function() { d3.select(this).attr("stroke", "#000"); })
  .on("mouseout", function() { d3.select(this).attr("stroke", null); })
  .on("click", (event, d) => focus !== d && (zoom(event, d), event.stopPropagation()));

// Append the text labels.
 const label = svg.append("g")
  .style("font", "10px sans-serif")
  .attr("pointer-events", "none")
  .attr("text-anchor", "middle")
.selectAll("text")
.data(root.descendants())
.join("text")
  .style("fill-opacity", d => d.parent === root ? 1 : 0)
  .style("display", d => d.parent === root ? "inline" : "none")
  .text(d => d.data.name);

  // Create the zoom behavior and zoom immediately in to the initial focus node.
  svg.on("click", (event) => zoom(event, root));
 let focus = root;
  let view;
 zoomTo([focus.x, focus.y, focus.r * 2]);

function zoomTo(v) {
const k = width / v[2];

view = v;

  label.attr("transform", d => `translate(${(d.x - v[0]) * k},${(d.y - v[1]) * k})`);
  node.attr("transform", d => `translate(${(d.x - v[0]) * k},${(d.y - v[1]) * k})`);
  node.attr("r", d => d.r * k);
}

 function zoom(event, d) {
 const focus0 = focus;

 focus = d;

const transition = svg.transition()
    .duration(event.altKey ? 7500 : 750)
    .tween("zoom", d => {
      const i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 2]);
      return t => zoomTo(i(t));
    });

label
  .filter(function(d) { return d.parent === focus || this.style.display === "inline"; })
  .transition(transition)
    .style("fill-opacity", d => d.parent === focus ? 1 : 0)
    .on("start", function(d) { if (d.parent === focus) this.style.display = "inline"; })
    .on("end", function(d) { if (d.parent !== focus) this.style.display = "none"; });
}

return svg.node();
}
};
</script>

有人可以帮我找出为什么它不显示吗？

Answer 1

做了 2 处更改并且成功了

<template>
  <div class="container">
  <svg></svg>
  </div>
</template>

选择 svg 而不是创建

// Select the SVG container.
const svg = d3.select("svg")