weixin_57555918 2021-09-21 15:12 采纳率: 0%
浏览 120

作为一个刚写代码的，这个问题有点难了，求解

不知道如何将文件中的数据做成一个二维数组，一个一维数组 包含5个对象，每个对象3个属性。还要用到D3 API的知识，如设置DOM元素属性等。

img

  • 写回答

1条回答 默认 最新

  • CSDN专家-showbo 2021-09-21 15:24
    关注

    csv就是一个文本文件，用d3 xhr对象读取就行，需要注意发布到web服务器后通过http协议访问，直接拖进浏览器file访问由于安全问题无法使用xhr对象。实际ajax对象）读取本地文件，当然测试用可以配置你的chrome添加参数访问本地文件，chrome配置具体参考：

    js获取本地json跨域报错-前端-CSDN问答 CSDN问答为您找到js获取本地json跨域报错相关问题答案，如果想了解更多关于js获取本地json跨域报错 javascript、json、有问必答 技术问题等相关问答，请访问CSDN问答。 https://ask.csdn.net/questions/7486150

    题主要的代码如下，有帮助点个采纳，谢谢~

    img

    <!DOCTYPE html>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script>
    function drawRects(dataset) {
        var width = 800;    //画布的宽度
        var height = 500;    //画布的高度

        var svg = d3.select("body")                //选择文档中的body元素
            .append("svg")                //添加一个svg元素
            .attr("width", width)        //设定宽度
            .attr("height", height);    //设定高度

        var colors = ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd'];//对应的颜色

        var rectHeight = 20;    //每个矩形所占的像素高度(包括空白)
        //绘制矩形
        svg.selectAll("rect").data(dataset).enter().append("rect")
            .attr("x", 50)//每个矩形的起始x坐标
            .attr("y", (d, i) => i * rectHeight)//每个矩形的起始y坐标
            //每个矩形的宽度
            .attr("width", d => d.value / 20)
            //每个矩形的高度
            .attr("height", rectHeight - 2)
            //填充颜色
            .attr("fill", (d, i) => colors[i]);

        //绘制文字
        svg.selectAll("text")
            .data(dataset)
            .join("text")
            .attr("x", d => d.value / 20 + 60)//文字x位置
            .attr("y", (d, i) => i * rectHeight + 15)//文字y位置
            .text(d => d.nation + ':' + d.value)//文字
            .attr("fill", (d, i) => colors[i]);//颜色
    }
    async function getData() {
        let data = await d3.dsv(",", "nation.csv", (data, index, columns) => {
            var arr = [];
            for (var i = 1; i < columns.length; i++) {//遍历列表头，去掉第一个项Year
                var item = {};
                item.year = data.Year;
                item.nation = columns[i];
                item.value = data[columns[i]];
                arr.push(item);
            }
            return arr
        });

        drawRects(data[0]);
    }

    getData()
</script>
    评论

报告相同问题？

  • 刚接触c++,求解这个入门代码怎么写 c++
    2021-10-23 16:18
    回答 1 已采纳 这个是个表达式，用于写在判断语句中的，如if int a = 2, b = 3, c = 6, d= 9;if(a < b && c < d){cout<<"判断为真";}
  • 这个代码怎么写，求解求解 c语言
    2021-11-14 15:33
    回答 1 已采纳 #include<stdio.h>int main(){ char c; c=getchar(); if(c>='0'&&c<='9') {
  • 求解，该怎么写这个代码 c++ 有问必答
    2021-11-15 10:44
    回答 2 已采纳 代码如下： #include <iostream> using namespace std; long long pq(int n) { if (n==0 || n==1)
  • MTSP的求解程序代码.zip
    2024-04-17 02:16
    【项目资源】：包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、...
  • 如何用c语言写出这个代码呀在线求解 c语言
    2022-10-22 22:33
    回答 1 已采纳 用一个变量max存储最大的数，先比较ab，如果a>b，就让max=a,b>a同理，然后得到的max再跟c比较，如果max>c,max就是最大值，否则max=c。然后比较max和15
  • 这个代码有什么问题？求解！ c# 开发语言
    2022-09-07 18:20
    回答 4 已采纳 没问题，可正常运行return 0;前边加个system("pause");你能看到打印结果
  • 大神求解这个java代码怎么写 java
    2021-06-21 14:34
    回答 1 已采纳 public class Account { private String idCard; private double balance; public Account()
  • MATLAB使用欧拉Euler法求解微分方程组 源程序代码.rar
    2024-04-16 02:16
    【项目资源】：包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、...
  • 可以求解下这个c语言问题嘛，补充代码 c语言
    2022-03-18 11:40
    回答 1 已采纳 简单来说(字符串逆序输出问题):①就是输入一个字符串②然后调用函数，将这个字符串进行逆序处理，比如输入abcde，处理之后是edcba。③逆序处理后，在主函数中输出。代码补充： 希望对题主有所帮助
  • 求解下图中两个代码的区别，和一个问题 c语言
    2022-03-21 15:33
    回答 1 已采纳 没任何区别无非下面的代码多用了个leap，起到的就是上面判断i%j，下面判断leap，其实leap的值就是i%j（虽然不是这么赋值而是直接赋值成0的，但是其实就是i%j==0时才赋值，所以还是i%j）
  • c/java语言两个问题求解，需代码 c语言 有问必答
    2023-02-26 19:19
    回答 6 已采纳 第二题，遍历到n,计算出每个数字的逆，然后测试是否为这个数的逆的倍数，如果是则个数增加1，遍历结束后输出。 #include<stdio.h> int main() { in
  • 多旅行商问题遗传算法求解及其改进.pdf
    2024-04-07 07:11
    【项目资源】：包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、...
  • 一个简单代码求解出来 c语言 有问必答
    2021-12-17 13:19
    回答 1 已采纳 这不是leetcode今天的每日一题吗？ // 数学方法 public int numWaterBottles(int n, int m) { int cnt = n
  • 基于遗传算法的最优化问题求解.pdf
    2024-04-17 01:44
    【项目资源】：包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、...
  • 基于遗传算法的多人旅行商问题求解.pdf
    2024-04-15 09:48
    【项目资源】：包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、...
  • 没有解决我的问题, 去提问

问题事件

  • 创建了问题 9月21日

悬赏问题

  • ¥15 树莓派与pix飞控通信
  • ¥15 自动转发微信群信息到另外一个微信群
  • ¥15 outlook无法配置成功
  • ¥30 这是哪个作者做的宝宝起名网站
  • ¥60 版本过低apk如何修改可以兼容新的安卓系统
  • ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
  • ¥50 有数据，怎么建立模型求影响全要素生产率的因素
  • ¥50 有数据，怎么用matlab求全要素生产率
  • ¥15 TI的insta-spin例程
  • ¥15 完成下列问题完成下列问题