折现生成器绘制不出图像

Question

如下代码，折线无法绘制出来，猜测可能是折线生成器那里的问题，请教大家

    <div id="container"></div> 
    <script>
        const width = 928;
        const height = 500;
        const marginTop = 20;
        const marginRight = 30;
        const marginBottom = 30;
        const marginLeft = 40;

        let data=d3.csv("aapl.csv") .then(function(data) {
        console.log(data);

        // Create the SVG container.
        const svg = d3.select("#container")
            .append("svg")
            .attr("width", width)
            .attr("height", height)
            .attr("viewBox", [0, 0, width, height])
            .attr("style", "max-width: 100%; height: auto; height: intrinsic;");

        const x = d3.scaleUtc([new Date('2007-04-23' ),new Date('2012-05-01')], [marginLeft, width - marginRight]);
        const y = d3.scaleLinear([0, d3.max(data, d => d.close)], [height - marginBottom, marginTop]);

        // Add the x-axis.
        svg.append("g")
            .attr("transform", `translate(0,${height - marginBottom})`)
            .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0));

        // Add the y-axis, remove the domain line, add grid lines and a label.
        svg.append("g")
            .attr("transform", `translate(${marginLeft},0)`)
            .call(d3.axisLeft(y).ticks(height / 40))
            .call(g => g.select(".domain").remove())
            .call(g => g.selectAll(".tick line").clone()
                .attr("x2", width - marginLeft - marginRight)
                .attr("stroke-opacity", 0.1))
            .call(g => g.append("text")
                .attr("x", -marginLeft)
                .attr("y", 10)
                .attr("fill", "currentColor")
                .attr("text-anchor", "start")
                .text("↑ Daily close ($)"));

        const line = d3.line()
            .x(d => x(d.date))
            .y(d => y(d.close));

        // Append a path for the line.
        svg.append("path")
            .attr("fill", "none")
            .attr("stroke", "steelblue")
            .attr("stroke-width", 1.5)
            .attr("d", line(data));  
    })
    </script>

Answer 1

【以下回答由 GPT 生成】

问题分析

根据提供的代码，可以看到绘制折线图的逻辑。但是在其中有一个问题，即数据获取部分。代码中使用了d3.csv来获取数据，但是在vue.js中，直接在script标签中使用d3.csv是行不通的。所以需要使用其他方式获取数据。

解决方案

1. 使用Vue.js的生命周期钩子函数mounted，当页面加载完成后，再获取数据并绘制折线图。

<script>
const width = 928;
const height = 500;
const marginTop = 20;
const marginRight = 30;
const marginBottom = 30;
const marginLeft = 40;

new Vue({
    el: '#container',
    mounted() {
        // 使用axios或fetch等方式获取数据
        axios.get("aapl.csv").then(response => {
            const data = d3.csvParse(response.data);

            console.log(data);

            // Create the SVG container.
            const svg = d3.select("#container")
                .append("svg")
                .attr("width", width)
                .attr("height", height)
                .attr("viewBox", [0, 0, width, height])
                .attr("style", "max-width: 100%; height: auto; height: intrinsic;");

            const x = d3.scaleUtc(['2007-04-23','2012-05-01'], [marginLeft, width - marginRight]);
            const y = d3.scaleLinear([0, d3.max(data, d => d.close)], [height - marginBottom, marginTop]);

            // Add the x-axis.
            svg.append("g")
                .attr("transform", `translate(0,${height - marginBottom})`)
                .call(d3.axisBottom(x));
        }).catch(error => {
            console.log(error);
        });
    }
});
</script>

1. 使用axios或fetch等方式获取数据。确保文件路径正确，并在获取到数据后进行处理并绘制折线图。

<script>
const width = 928;
const height = 500;
const marginTop = 20;
const marginRight = 30;
const marginBottom = 30;
const marginLeft = 40;

// 使用axios或fetch等方式获取数据
axios.get("aapl.csv").then(response => {
    const data = d3.csvParse(response.data);

    console.log(data);

    // Create the SVG container.
    const svg = d3.select("#container")
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .attr("viewBox", [0, 0, width, height])
        .attr("style", "max-width: 100%; height: auto; height: intrinsic;");

    const x = d3.scaleUtc(['2007-04-23','2012-05-01'], [marginLeft, width - marginRight]);
    const y = d3.scaleLinear([0, d3.max(data, d => d.close)], [height - marginBottom, marginTop]);

    // Add the x-axis.
    svg.append("g")
        .attr("transform", `translate(0,${height - marginBottom})`)
        .call(d3.axisBottom(x));
}).catch(error => {
    console.log(error);
});
</script>

解决结果

使用以上解决方案获取数据并绘制折线图，即可在页面中正确显示出折线图。请确保文件路径的正确性，并根据具体情况进行相应的调整。

【相关推荐】

• 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7530863
• 你也可以参考下这篇文章：如何从零开发一个低代码平台，有哪些成熟技术组件可用
• 您还可以看一下 纪佳琪老师的机器学习之聚类、主成分分析理论与代码实践课程中的 协方差矩阵的特征值分解算法代码实现小节, 巩固相关知识点
  
• 除此之外, 这篇博客: 仿淘宝购物车实现功能：滚动页面到【结算操作】不可视时，浏览器底部出现固定栏中的 代码： 部分也许能够解决你的问题。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^