我在vue2上成功运行了D3创建了树形图，在uniapp上不生效。
uniapp 代码
<template>
<!-- <view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
</view> -->
<view id="tree"></view>
</template>
<script>
import * as d3 from 'd3'
export default {
data() {
return {
dataset: {
name: "垃圾分类",
children: [{
name: "可回收垃圾",
children: [{
name: "废纸",
children: [{
name: "报纸"
},
{
name: "期刊"
}
]
},
{
name: "金属"
},
{
name: "布料"
},
{
name: "塑料"
}
]
},
{
name: "厨余垃圾",
children: [{
name: "剩菜剩饭"
},
{
name: "骨头"
},
{
name: "果皮"
},
{
name: "菜根菜叶"
}
]
},
{
name: "其他垃圾",
children: [{
name: "纸巾"
},
{
name: "尘土"
},
{
name: "残叶"
}
]
},
{
name: "有害垃圾",
children: [{
name: "过期药物"
},
{
name: "化妆品"
},
{
name: "废弃灯泡"
},
{
name: "蓄电池"
}
]
}
]
},
}
},
onLoad() {
var margin = { top: 90, bottom: 0, left: 10, right: 0 };
var width = 100;
var height = 100;
var svg = d3.select("#tree").append("svg").attr("width", width + "px").attr("height", height + "px");
console.log(svg);
},
methods: {
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
vue2截图
<template>
<!-- <div id="app">-->
<!-- <img src="./assets/logo.png">-->
<!-- <router-view/>-->
<!-- </div>-->
<div id="tree"></div>
</template>
<script>
import * as d3 from 'd3'
export default {
name: 'App',
data() {
return {
//数据
dataset :{
name: "垃圾分类",
children: [
{
name: "可回收垃圾",
children: [
{
name: "废纸",
children:[
{name:"报纸"},
{name:"期刊"}
]
},
{
name: "金属"
},
{
name: "布料"
},
{
name: "塑料"
}
]
},
{
name: "厨余垃圾",
children: [
{
name: "剩菜剩饭"
},
{
name: "骨头"
},
{
name: "果皮"
},
{
name: "菜根菜叶"
}
]
},
{
name: "其他垃圾",
children: [
{
name: "纸巾"
},
{
name: "尘土"
},
{
name: "残叶"
}
]
},
{
name: "有害垃圾",
children: [
{
name: "过期药物"
},
{
name: "化妆品"
},
{
name: "废弃灯泡"
},
{
name: "蓄电池"
}
]
}
]
},
flag: 0
};
},
mounted() {//定义边界
var margin = { top: 90, bottom: 0, left: 10, right: 0 };
// var width = this.dataset.children.length * 300;
// var height = this.dataset.children.length * 50;
var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
var svg = d3.select("#tree")
.append("svg")
.attr("width", width + "px")
.attr("height", height + "px");
var g = svg
.append("g")
.attr("transform", "translate(" + margin.top + "," + margin.left + ")");
// 创建一个层级布局
var hierarchyData = d3.hierarchy(this.dataset).sum(function(d) {
return d.value;
});
// 创建一个树状图
var tree = d3
.tree()
.size([width - 100, height -100])
.separation(function(a, b) {
return (a.parent == b.parent ? 1 : 2) / a.depth;
});
var treeData = tree(hierarchyData);
var nodes = treeData.descendants();
var links = treeData.links();
var generator = d3
.linkHorizontal()
.x(function(d) {
return d.x;
})
.y(function(d) {
return d.y;
});
g.append("g")
.selectAll("path")
.data(links)
.enter()
.append("path")
.attr("d", function(d) {
var start = { x: d.source.x, y: d.source.y };
var end = { x: d.target.x, y: d.target.y };
return generator({ source: start, target: end });
})
.attr("fill", "none")
.attr("stroke", "#000")
.attr("stroke-width", 1);
var gs = g
.append("g")
.selectAll("g")
.data(nodes)
.enter()
.append("g")
.attr("transform", function(d) {
var cx = d.y;
var cy = d.x;
return "translate(" + cy + "," + cx + ")";
});
//绘制节点
gs.append("circle")
.attr("r", 6)
.attr("fill", "white")
.attr("stroke", "#000")
.attr("stroke-width", 1)
.on("mouseover", function(d) { //交互
d3.select(this)
.attr("stroke", "skyblue")
.attr("stroke-width", 2)
})
.on("mouseout",function(){
d3.select(this)
.attr("stroke", "#000")
.attr("stroke-width", 1)
})
//绘制文字
gs.append("text")
.attr("x", function(d) {
return d.children ? -90 : 10;
})
.attr("y", -5)
.attr("dy", 10)
.text(function(d) {
return d.data.name;
})
.on("mouseover", function(d) { //交互
d3.select(this)
.attr("fill", "red")
})
.on("mouseout",function(){
d3.select(this)
.attr("fill", "#000")
})
},
methods: {
getData(dataStr) {
for(let key in dataStr){
if (key == 'children'){
this.getData(dataStr.children)
} else {
continue;
}
this.flag++;
}
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.node circle {
fill: none;
stroke: #fff;
stroke-width: 1.5px;
}
.node text {
font: 10px sans-serif;
}
.tree svg {
width: 100%;
height: 100%;
}
</style>
