vue2.0中使用D3.js绘制树状图连线阴影

Question

最近在vue项目中使用D3.js v4构建树状图，但是连线显示不正常，试过用原生的HTML完全正常，求赐教。
截图：

代码：

<template>
  <el-row>
    <svg width="1000" height="500"></svg>
  </el-row>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    /* 绘制图表 */
    drawChart() {
      let svg = this.$d3.select("svg")
      let width = +svg.attr("width")
      let height = +svg.attr("height")
      let g = svg.append("g").attr("transform", "translate(100,0)")

      let tree = this.$d3.tree()
        .size([height, width - 160])

      this.$d3.json("static/data.json", (error, data) => {
        if (error) throw error

        let root = this.$d3.hierarchy(data)
        tree(root)

        let link = g.selectAll(".link")
          .data(root.descendants().slice(1))
          .enter().append("path")
          .attr("class", "link")
          .attr("d", function(d){
                return "M"+d.y+" "+d.x+
                "L"+(d.parent.y+120)+" "+d.x+
                " L"+(d.parent.y+120)+" "+d.parent.x+" L"+
                d.parent.y+" "+d.parent.x
          })

        let node = g.selectAll(".node")
          .data(root.descendants())
          .enter().append("g")
          .attr("class", function (d) { return "node" + (d.children ? " node--internal" : " node--leaf") })
          .attr("transform", function (d) {
            return "translate(" + d.y + "," + d.x + ")"
          })

        node.append("circle")
          .attr("r", 2.5);

        node.append("text")
          .attr("dy", 3)
          .attr("x", function (d) { return d.children ? -8 : 8; })
          .style("text-anchor", function (d) { return d.children ? "end" : "start" })
          .text(function (d) {
            return d.data.name
          })
      })
    }
  },
  mounted() {
    this.drawChart()
  }
}
</script>

<style scoped>
  .node {
    font: 12px sans-serif;
  }

  .link {
    fill: none;
    stroke: #ccc;
    stroke-width: 1.5px;
  }
</style>

数据：

{
  "name": "中国",
  "number": 2000,
  "children": [
    {
      "name": "浙江",
      "number": 100,
      "children": [
        {
          "name": "杭州",
          "number": 100
        },
        {
          "name": "宁波",
          "number": 200
        },
        {
          "name": "温州",
          "number": 300
        },
        {
          "name": "绍兴",
          "number": 400
        }
      ]
    },
    {
      "name": "广西",
      "number": 500,
      "children": [
        {
          "name": "桂林",
          "number": 100
        },
        {
          "name": "南宁",
          "number": 200
        },
        {
          "name": "柳州",
          "number": 300
        },
        {
          "name": "防城港",
          "number": 400
        }
      ]
    },
    {
      "name": "黑龙江",
      "number": 500,
      "children": [
        {
          "name": "哈尔滨",
          "number": 100
        },
        {
          "name": "齐齐哈尔",
          "number": 200
        },
        {
          "name": "牡丹江",
          "number": 300
        },
        {
          "name": "大庆",
          "number": 400
        }
      ]
    },
    {
      "name": "新疆",
      "number": 500,
      "children": [
        {
          "name": "乌鲁木齐",
          "number": 100
        },
        {
          "name": "克拉玛依",
          "number": 200
        },
        {
          "name": "吐鲁番",
          "number": 300
        },
        {
          "name": "哈密",
          "number": 400
        }
      ]
    }
  ]
}

Answer 1

原因找到了，是由于vue style添加了scoped，导致样式无效。

Answer 2

因为vue生成的dom元素上都有自定义属性 data-v-xxxxxx ，因为这个属性的存在，style标签上带有scope会让第三方生成的dom元素无法识别样式

Answer 3

您好，请问如何 让它从上到下 显示呢。