在 vue 中使用 d3.js

如何解决在 vue 中使用 d3.js

我将自己使用的 d3 组件插入 element-ui el-table-column 模板，但这不起作用，svg 元素为空。我是 d3 的新手，我无法自己弄清楚。我是很困惑，请给我一些建议，谢谢！ 结果

这是我的代码，一个 d3 组件和一个 vue 模板，我使用 d3 v4 和 element-ui

<template>
    <!-- 智能检索表格基因区域图 -->
    <div>
        <svg width="180" height="40"></svg>
    </div>
</template>
    
<script>
    import * as d3 from 'd3'
    
    export default {
        props: {
            startPosition: Number,endPosition: Number,},computed: {
            positionArr() {
                return [this.startPosition,this.endPosition]
            }
        },methods: {
            drawSVG() {
            // 定义画布宽度
            // const containerWidth = 180;
            // 矩形高度
            const rectHeight = 6;
            // 默认矩形的位置
    
    
            // 数据源  图上绿色部分
            let dataSet = [
                [790,2292],[5041,5619],[8379,8469],[8797,9417],[1,634],[6062,6310],8653],[9086,9719],[2085,5096],[5559,5850],[6225,8795],];
            // push 序列起点位置和终点位置数组
            dataSet.push(this.positionArr);
        
            //定义一个线性比例尺，domain为定义域，range为值域
            const scaleLinear = d3.scaleLinear()
                .domain([1,9719])
                .range([0,180]);
        
            // 选择画布
            let svg = d3.select("svg");
            console.log('svg',svg);
            // 为画布添加一个g标签，并为其设置transform属性
            let g = svg.append("g")
            //   .attr("transform","translate("+marge.top+","+marge.left+")");
            // 在g标签中绘制矩形
            g.selectAll("rect")
                .data(dataSet)
                .enter()
                .append("rect")
                .attr("x",function(d) {  // x是rect起点的x坐标
                return scaleLinear(d[0]);
                })
                .attr("y",function(d,i){  // y是rect起点的y坐标
                if (i <= 3) {
                    return 0;
                } else if (i <= 7 && i > 3) {
                    return 10;
                } else if (i<= 10 && i > 7) {
                    return 20;
                } else {
                    return 0;  // 黄色矩形
                }
                })
                .attr("width",i){
                console.log('d',d);
                console.log('i',i);
                return scaleLinear(d[1]) - scaleLinear(d[0]);//设置宽,并在这里使用比例尺
                })
                .attr("height",i) {
                if (i < dataSet.length - 1) {
                    return rectHeight;
                } else {
                    return 26;
                }
                })  // rect的高度
                .attr("fill",i) {
                if (i < dataSet.length - 1) {
                    return 'green';
                } else {
                    return 'yellow';
                }
                })  // rect的填充颜色
                .attr("opacity",i) {
                if (i < dataSet.length - 1) {
                    return 1;
                } else {
                    return 0.5;
                }
                });
            },created() {
            console.log('this.positionArr',this.positionArr);
            this.drawSVG();
        }
    }
</script>

<el-table-column label="基因区域" align="center" width="200">
        <template slot-scope="scope">
            <!-- 基因区域图组件 -->
            <!-- 绑定基因片段起始位置和终止位置 -->
            <GeneRegionGraph
            :startPosition=scope.row.partstart
            :endPosition=scope.row.partend>
            </GeneRegionGraph>
        </template>
 </el-table-column>

解决方法

将 id attr 动态绑定到 svg 元素并在挂载的生命周期而不是创建的生命周期中调用 drawSVG() 函数可以解决这个问题。