寻求D3.Selectall选择器解释

发布于 2025-02-13 11:47:43 字数 4145 浏览 2 评论 0原文

我目前正在尝试d3 selection。从我研究的任何文献/材料中，我都知道它需要有效的CSS选择器。

因此，例如，如果我想创建一个数据驱动的路径，我应该以这种方式使用它

svg.selectAll('path') /*valid CSS Selector*/
    .data(index1)
    .join('path')    
    .attr('class', (d) => `ln${d}`)
    .attr('d', pathVal)
    .attr('stroke', () => { return `hsla(${Math.random() * 360} , ${((Math.random() + Math.random()/2)*100).toFixed(2)}%, 50%, 1)`; })
    .style('transform', (d, i) => { return `translateY(${d*multiplier}px)` })
    .attr('stroke-width', '2')

const width = 1280;
height = 720;

svg = d3.select('svg')
    .attr('xmlns', 'http://www.w3.org/2000/svg')
    .attr('viewBox', `0 0 ${width} ${height}`)

rect = svg.append('rect')
    .attr('x', '0')
    .attr('y', '0')
    .attr('width', `${width}`)
    .attr('height', `${height}`)
    .attr('fill', `#EFEFEF`)

//create 3 path for testing
dataHorizontal = [
    { x: 0, y: 0 },
    { x: 1280, y: 0 }
];

pathVal = d3.line()
    .x(d => d.x)
    .y(d => d.y)
    (dataHorizontal);

index1 = [1, 2, 3];

multiplier = 60;

//create path

svg.selectAll('path')
    .data(index1)
    .join('path')   
    .attr('class', (d) => `ln${d}`)
    .attr('d', pathVal)
    .attr('stroke', () => { return `hsla(${Math.random() * 360} , ${((Math.random() + Math.random()/2)*100).toFixed(2)}%, 50%, 1)`; })
    .style('transform', (d, i) => { return `translateY(${d*multiplier}px)` })
    .attr('stroke-width', '2')

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>


<body>
    <div id="container" class="svg-container"></div>
    <svg>
    </svg>
    <!--d3 script-->
    <script src="prod.js"></script>
</body>

</html>

但是，令我惊讶的是，我可以看到我可以在那里传递任何东西。例如，我可以传递 svg.Selectall（'foo'） ，它仍然可以使用。

与svg.Selectall相比（'PATH'）？

const width = 1280;
height = 720;

svg = d3.select('svg')
    .attr('xmlns', 'http://www.w3.org/2000/svg')
    .attr('viewBox', `0 0 ${width} ${height}`)

rect = svg.append('rect')
    .attr('x', '0')
    .attr('y', '0')
    .attr('width', `${width}`)
    .attr('height', `${height}`)
    .attr('fill', `#EFEFEF`)

//create 3 path for testing
dataHorizontal = [
    { x: 0, y: 0 },
    { x: 1280, y: 0 }
];

pathVal = d3.line()
    .x(d => d.x)
    .y(d => d.y)
    (dataHorizontal);

index1 = [1, 2, 3];

multiplier = 60;

//create path

svg.selectAll('foo') /*why it worked?*/
    .data(index1)
    .join('path')   
    .attr('class', (d) => `ln${d}`)
    .attr('d', pathVal)
    .attr('stroke', () => { return `hsla(${Math.random() * 360} , ${((Math.random() + Math.random()/2)*100).toFixed(2)}%, 50%, 1)`; })
    .style('transform', (d, i) => { return `translateY(${d*multiplier}px)` })
    .attr('stroke-width', '2')

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>


<body>
    <div id="container" class="svg-container"></div>
    <svg>
    </svg>
    <!--d3 script-->
    <script src="prod.js"></script>
</body>

</html>

原文

I am currently experimenting with d3-selection. From whatever, literature/material I studied, I understand that it takes a valid CSS selector.

So, for example, if I want to create a data-driven path, I should be using it this way

svg.selectAll('path') /*valid CSS Selector*/
    .data(index1)
    .join('path')    
    .attr('class', (d) => `ln${d}`)
    .attr('d', pathVal)
    .attr('stroke', () => { return `hsla(${Math.random() * 360} , ${((Math.random() + Math.random()/2)*100).toFixed(2)}%, 50%, 1)`; })
    .style('transform', (d, i) => { return `translateY(${d*multiplier}px)` })
    .attr('stroke-width', '2')

const width = 1280;
height = 720;

svg = d3.select('svg')
    .attr('xmlns', 'http://www.w3.org/2000/svg')
    .attr('viewBox', `0 0 ${width} ${height}`)

rect = svg.append('rect')
    .attr('x', '0')
    .attr('y', '0')
    .attr('width', `${width}`)
    .attr('height', `${height}`)
    .attr('fill', `#EFEFEF`)

//create 3 path for testing
dataHorizontal = [
    { x: 0, y: 0 },
    { x: 1280, y: 0 }
];

pathVal = d3.line()
    .x(d => d.x)
    .y(d => d.y)
    (dataHorizontal);

index1 = [1, 2, 3];

multiplier = 60;

//create path

svg.selectAll('path')
    .data(index1)
    .join('path')   
    .attr('class', (d) => `ln${d}`)
    .attr('d', pathVal)
    .attr('stroke', () => { return `hsla(${Math.random() * 360} , ${((Math.random() + Math.random()/2)*100).toFixed(2)}%, 50%, 1)`; })
    .style('transform', (d, i) => { return `translateY(${d*multiplier}px)` })
    .attr('stroke-width', '2')

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>


<body>
    <div id="container" class="svg-container"></div>
    <svg>
    </svg>
    <!--d3 script-->
    <script src="prod.js"></script>
</body>

</html>

However, to my surprise, I can see that I can pass on anything there. For example, I can pass on svg.selectAll('foo') and it would still work.

Can someone please explain why/how does it work and what are the side effects of svg.selectAll('foo') compared to svg.selectAll('path')?

const width = 1280;
height = 720;

svg = d3.select('svg')
    .attr('xmlns', 'http://www.w3.org/2000/svg')
    .attr('viewBox', `0 0 ${width} ${height}`)

rect = svg.append('rect')
    .attr('x', '0')
    .attr('y', '0')
    .attr('width', `${width}`)
    .attr('height', `${height}`)
    .attr('fill', `#EFEFEF`)

//create 3 path for testing
dataHorizontal = [
    { x: 0, y: 0 },
    { x: 1280, y: 0 }
];

pathVal = d3.line()
    .x(d => d.x)
    .y(d => d.y)
    (dataHorizontal);

index1 = [1, 2, 3];

multiplier = 60;

//create path

svg.selectAll('foo') /*why it worked?*/
    .data(index1)
    .join('path')   
    .attr('class', (d) => `ln${d}`)
    .attr('d', pathVal)
    .attr('stroke', () => { return `hsla(${Math.random() * 360} , ${((Math.random() + Math.random()/2)*100).toFixed(2)}%, 50%, 1)`; })
    .style('transform', (d, i) => { return `translateY(${d*multiplier}px)` })
    .attr('stroke-width', '2')

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>


<body>
    <div id="container" class="svg-container"></div>
    <svg>
    </svg>
    <!--d3 script-->
    <script src="prod.js"></script>
</body>

</html>

分享到QQ

分享到微博