Vue.js 如何将D3组件附加到另一个vue文件中的div
我将D3JS图表合并到我的VueJS应用程序中,在理解如何将D3组件连接到.vue文件中的div时遇到困难。当我将D3图表附加到HTML主体时,它呈现得非常漂亮,但我不希望它出现在每个视图上,只希望它出现在我导入到的视图上,并且只出现在我想要的div上 我已经看过了在vue中安装和计算D3组件的其他答案——所有这些看起来都太复杂了 可能我不明白D3图表应该如何作为Vue组件工作。我尽量使它简单。这里是我的家.vue在视图中/Vue.js 如何将D3组件附加到另一个vue文件中的div,vue.js,d3.js,Vue.js,D3.js,我将D3JS图表合并到我的VueJS应用程序中,在理解如何将D3组件连接到.vue文件中的div时遇到困难。当我将D3图表附加到HTML主体时,它呈现得非常漂亮,但我不希望它出现在每个视图上,只希望它出现在我导入到的视图上,并且只出现在我想要的div上 我已经看过了在vue中安装和计算D3组件的其他答案——所有这些看起来都太复杂了 可能我不明白D3图表应该如何作为Vue组件工作。我尽量使它简单。这里是我的家.vue在视图中/ <template> <div id="char
<template>
<div id="chart">
</div>
</template>
<script>
import MainChart from "@/components/MainChart.vue";
export default {
name: 'chart',
components: {
MainChart
}
}
</script>
从“@/components/MainChart.vue”导入MainChart;
导出默认值{
名称:'图表',
组成部分:{
主图表
}
}
然后是组件中的主图表组件/
<template>
<div id="chart">
</div>
</div>
</template>
<script>
import * as d3 from "d3";
export default {
name: "MainChart",
};
// 2. Use the margin convention practice
var margin = {top: 50, right: 50, bottom: 50, left: 50}
, width = window.innerWidth - margin.left - margin.right // Use the window's width
, height = window.innerHeight - margin.top - margin.bottom; // Use the window's height
// The number of datapoints
var n = 30;
// 5. X scale will use the index of our data
var xScale = d3.scalePow()
.domain([0, n-1]) // input
.range([0, width]); // output
// 6. Y scale will use the randomly generate number
var yScale = d3.scalePow()
.domain([0, 1000]) // input
.range([height, 0]); // output
// 1. Add the SVG to the page and employ #2
var svg = d3.select("#chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// 3. Call the x axis in a group tag
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(xScale)); // Create an axis component with d3.axisBottom
svg.append("text")
.attr("class", "x label")
.attr("text-anchor", "end")
.attr("x", width)
.attr("y", height - 6)
.text("Time");
// 4. Call the y axis in a group tag
svg.append("g")
.attr("class", "y axis")
.call(d3.axisLeft(yScale)); // Create an axis component with d3.axisLeft
svg.append("text")
.attr("class", "y label")
.attr("text-anchor", "end")
.attr("y", 6)
.attr("dy", ".75em")
.attr("transform", "rotate(-90)")
.text("Views");
// 7. d3's line generator
var line = d3.line()
.x(function(d, i) { return xScale(i); }) // set the x values for the line generator
.y(function(d) { return yScale(d.y); }) // set the y values for the line generator
.curve(d3.curveMonotoneX) // apply smoothing to the line
// 8. An array of objects of length N. Each object has key -> value pair, the key being "y" and the value is a random number
// var dataset = d3.range(n).map(function(d) { return {"y": d3.randomUniform(1)() } })
var dataset = [],
n = 30,
a = 20,
b = 1.15;
for (var k = 0; k < n; k++) {
dataset.push({x: 1 * k, y: a * Math.pow(b, k)});
}
// 9. Append the path, bind the data, and call the line generator
svg.append("path")
.datum(dataset) // 10. Binds data to the line
.attr("class", "line") // Assign a class for styling
.attr("d", line) // 11. Calls the line generator
.attr("stroke-dasharray", 100 + " " + 100)
.attr("stroke-dashoffset", 1000)
.attr("fill", "none")
.transition()
.duration(10000)
.ease(d3.easeLinear)
.attr("stroke-dashoffset", 0);
// 12. Appends a circle for each datapoint
svg.selectAll(".dot")
.data(dataset)
.enter().append("circle") // Uses the enter().append() method
.attr("class", "dot") // Assign a class for styling
.attr("cx", function(d, i) { return xScale(i) })
.attr("cy", function(d) { return yScale(d.y) })
.attr("r", 5);
</script>
<style>
/* 13. Basic Styling with CSS */
/* Style the lines by removing the fill and applying a stroke */
.line {
fill: none;
stroke: #678C1A;
stroke-width: 3;
}
.axis text { display: none; }
/* Style the dots by assigning a fill and stroke */
.dot {
fill: #C7D941;
stroke: #fff;
}
</style>
从“d3”导入*作为d3;
导出默认值{
名称:“主图表”,
};
// 2. 使用保证金惯例惯例
var margin={顶部:50,右侧:50,底部:50,左侧:50}
,width=window.innerWidth-margin.left-margin.right//使用窗口的宽度
,height=window.innerHeight-margin.top-margin.bottom;//利用窗户的高度
//数据点的数量
var n=30;
// 5. X标度将使用我们数据的索引
var xScale=d3.scalePow()
.domain([0,n-1])//输入
.范围([0,宽度];//输出
// 6. Y刻度将使用随机生成的数字
var yScale=d3.scalePow()
.domain([0,1000])//输入
.范围([高度,0]);//输出
// 1. 将SVG添加到页面并使用#2
var svg=d3.选择(“图表”).追加(“svg”)
.attr(“宽度”,宽度+边距。左侧+边距。右侧)
.attr(“高度”,高度+边距。顶部+边距。底部)
.附加(“g”)
.attr(“转换”、“平移”(+margin.left+)、“+margin.top+”);
// 3. 调用组标记中的x轴
svg.append(“g”)
.attr(“类”、“x轴”)
.attr(“变换”、“平移(0)”、“高度+”)
.call(d3.axisBottom(xScale));//使用d3.axisBottom创建轴组件
svg.append(“文本”)
.attr(“类别”、“x标签”)
.attr(“文本锚定”、“结束”)
.attr(“x”,宽度)
.attr(“y”,高度-6)
.文本(“时间”);
// 4. 调用组标记中的y轴
svg.append(“g”)
.attr(“类”、“y轴”)
.call(d3.axisLeft(yScale));//使用d3.axisLeft创建轴组件
svg.append(“文本”)
.attr(“类别”、“y标签”)
.attr(“文本锚定”、“结束”)
.attr(“y”,6)
.attr(“dy”,“.75em”)
.attr(“变换”、“旋转(-90)”)
.文本(“意见”);
// 7. d3线发生器
var line=d3.line()
.x(函数(d,i){return xScale(i);})//设置线生成器的x值
.y(函数(d){return yScale(d.y);})//为线路生成器设置y值
.curve(d3.curveMonotoneX)//对直线应用平滑
// 8. 长度为N的对象数组。每个对象都有键->值对,键为“y”,值为随机数
//VarDataSet=d3.range(n).map(函数(d){return{“y”:d3.randomUniform(1)(}})
var数据集=[],
n=30,
a=20,
b=1.15;
对于(var k=0;k
因为当我将svg附加到“body”时,它工作正常,所以一定是D3图表在加载到Home.vue时找不到div,对吗?从发布的示例中,我看到一些语法错误 Home.vue
从“@/components/MainChart.vue”导入MainChart;
导出默认值{
名称:'图表',
组成部分:{
主图表
}
}