Ds.js绘图,数据集引入问题

ds.js绘图时要将数据集嵌入代码内部而不用d3.tsv方法引入要如何实现,刚学习ds绘图

img

第一个注释掉直接创建的data数组通过引入可以呈现
```javascript
let plot = document.getElementById('plot')
            plot.addEventListener('click',function plot(e){
                // e.preventDefault();
            // document.getElementById('xianshi').textContent='实验成功'
             d3.tsv( "new_file.tsv" )                            //<2>
             // var data = [
                //  {x:20,y:20},
                //  {x:40,y:40},
                //  {x:60,y:60},
                //  {x:80,y:80},
                //  {x:100,y:100}
             // ]
                    .then( function( data ) { 
                        d3.select('svg')
                            .selectAll('circle')
                            .data(data)
                            .enter()
                            .append('circle')
                            .attr('r',3).attr('fill','pink')
                            .attr('cx',function(d){return d['x']})
                            .attr('cy',function(d){return d['y']});
                })
            });

注释掉引入却不行,是我的嵌入语法有问题吗
```javascript
let plot = document.getElementById('plot')
            plot.addEventListener('click',function plot(e){
                // e.preventDefault();
            // document.getElementById('xianshi').textContent='实验成功'
             // d3.tsv( "new_file.tsv" )                            //<2>
             var data = [
                 {x:20,y:20},
                 {x:40,y:40},
                 {x:60,y:60},
                 {x:80,y:80},
                 {x:100,y:100}
             ]
                    data.then( function( data ) { 
                        d3.select('svg')
                            .selectAll('circle')
                            .data(data)
                            .enter()
                            .append('circle')
                            .attr('r',3).attr('fill','pink')
                            .attr('cx',function(d){return d['x']})
                            .attr('cy',function(d){return d['y']});
                })
            });



解决了.then那一行删掉就可以了,不过有人知道原理吗

  • 请看👉 :D3.js v6(最新)版本 组织树图:支持折叠,缩放,拖拽平移 ,自定义渲染 TSX和JS两种版本 复制直接可用 全网最新最全!!
  • 以下回答由chatgpt基于相关博客总结生成:

    如果您不想使用d3.tsv方法引入数据集,可以考虑以下方法在代码中嵌入数据集:

    1. 创建一个数组变量,用于存储您的数据集。例如:
    var dataset = [
        { name: "A", value: 10 },
        { name: "B", value: 20 },
        { name: "C", value: 15 },
        // 更多数据...
    ];
    
    1. 在初始化树状图之前,将数据集转换为适合ds.js使用的层级数据结构。您可以使用d3.hierarchy和d3.tree来完成这个转换过程。例如:
    var root = d3.hierarchy({children: dataset})
        .sum(function(d) { return d.value; });
    
    var treeLayout = d3.tree()
        .size([width, height]);
    
    var treeData = treeLayout(root);
    
    1. 通过treeData.descendants()和treeData.links()方法获取绘制树所需的节点集和链接集。
    var nodes = treeData.descendants();
    var links = treeData.links();
    

    这样,您就可以在不使用d3.tsv方法的情况下,将数据集嵌入代码中,并且使用这些数据进行ds.js绘图。

    请注意,上述代码示例中的变量名和数据结构根据您的实际情况进行适当调整。