javascript - 在 Vue 中使用 D3/没有选择器？

Question

我正在尝试实现一个与此非常相似的饼图:http://bl.ocks.org/dbuezas/9306799

我可以很好地跟进； IE。我可以手动将这些添加到我的模板中:

var svg = d3.select("body")
    .append("svg")
    .append("g")

svg.append("g")
    .attr("class", "slices");
svg.append("g")
    .attr("class", "labels");
svg.append("g")
    .attr("class", "lines");

其中，我刚刚创建了一个这样的模板:

<svg width="200" height="200">
      <g :style="{transform: `translate(${width / 2}px, ${height / 2}px)`}">
        <g class="labels"></g>
        <g class="slices">
          <path
            v-for="(s, i) in slices"
            class="slice"
            :key="i"
            :d="s.d"
            :fill="s.fill"></path>
        </g>
        <g class="lines"></g>
      </g>      
    </svg>

但是，当代码引用该 SVG 对象以将数据应用到/etc 时，我有点不知所措:

var slice = svg.select(".slices").selectAll("path.slice")
    .data(pie(data), key);

slice.enter()
    .insert("path")
    .style("fill", function(d) { return color(d.data.label); })
    .attr("class", "slice");

我认为有一些 d3 方法可以提供数据以获取每个饼图切片的相关 d/fill 信息，但我不确定 d3 是否应该是用这种方式。我看错了吗？

Answer 1

您现在要做的是构建 UI(SVG 元素)两次，一次使用 d3 (.select()/.append()) 一次使用 Vue ( html 模板)。这没有多大意义，所以你需要找到另一种方式让 Vue 和 d3 合作。

这是一个使用 Vue 进行 UI 和 d3 进行数据处理的示例:

https://bl.ocks.org/getflourish/8b3eeb3076bc3e20099de7f2ef9186b8