个人中心
gpt4 book ai didi

javascript - D3根据数据更新颜色

转载 作者：行者123 更新时间：2023-12-04 08:25:13 25 4
gpt4 key购买 nike

我正在使用 D3 根据数据绘制和着色线条。我现在想根据同一个数据集中的不同特征来更新这些线条的颜色，但是我的变色功能(colorP2)不起作用——我知道这个颜色变化看起来没什么用，但它稍后会被一个按钮触发.
有任何想法吗？下面是我的代码。
[更新] 正如 Andrew Reed 所指出的，代码中有一个与我的问题无关的错误，我在下面的代码中修复并标记了该错误。
索引.html

<html>
<head>
<style>
.line {
    stroke-width: 4px;
    fill: none;
}
</style>
</head>

<script src="https://d3js.org/d3.v6.min.js"></script>
<script type="module">
  import {drawLines} from './drawLines.js';

  d3.json("test.geojson").then(drawLines);
</script>

<body>
    <svg id='map'></svg>
    <button onclick="colorP1()">colorP1</button>
    <button onclick="colorP2()">colorP2</button>
    <!-- <svg id="data" class="map_frame"></svg> -->

</body>
</html>
drawLines.js 
function colorInterpolate(data, property) {
    let max_d = d3.max(data.features.map(d => d.properties[property]));
    let range = [max_d, 1];
    return d3.scaleSequential().domain(range).interpolator(d3.interpolateViridis); 
}

export function drawLines(data) {

    let width = 900,
        height = 500,
        initialScale = 1 << 23,
        initialCenter = [-74.200698022608137, 40.034504451003734]

    let svg = d3.select('#map')
        .attr('height', height)
        .attr('width', width)

    let projection = d3.geoMercator()
        .scale(initialScale)
        .center(initialCenter)
        .translate([width / 2, height / 2])

    let path = d3.geoPath(projection)

    let myColor = colorInterpolate(data, 'p1');

    let lines = svg.append('g')

    lines.selectAll('path')
        .data(data.features)
        .join('path') // previously wrong, error was unrelated to question, as pointed out by Andrew.
        .attr('class', 'line')
        .attr('d', path)
        .attr("stroke", function(d) {
                return myColor(d.properties.p1);
            })

    colorP2();

    function colorP2() {
        let myColor = colorInterpolate(data, 'p2');
        lines.selectAll('path')
            .data(data.features)
            .join()
            .attr("stroke", function(d) {
                    return myColor(d.properties.p2);
                })
    }
}
test.geojson 
{
"type": "FeatureCollection",
"name": "lines",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "id": 3, "p1": 1, "p2": 3}, "geometry": { "type": "LineString", "coordinates": [ [ -74.201304101157845, 40.033790926216739 ], [ -74.201226425025339, 40.033761910802717 ], [ -74.201164135201353, 40.033738641825124 ] ] } },
{ "type": "Feature", "properties": { "id": 4, "p1": 2, "p2": 2}, "geometry": { "type": "LineString", "coordinates": [ [ -74.200521185229846, 40.034804885753857 ], [ -74.200535458528648, 40.034780636493231 ], [ -74.200698022608137, 40.034504451003734 ], [ -74.200932444446437, 40.034106179618831 ], [ -74.201017665586349, 40.033961391736824 ] ] } }
]
}

最佳答案

解决方案
最终，您不需要在颜色更改功能中加入任何数据:元素已经存在，数据绑定(bind)到它们。连接旨在确保数据数组中的每一项都存在一个 DOM 元素。相反，只需选择元素并更改它们的属性/样式:

  lines.selectAll('path')
       .attr("stroke", function(d) { return myColor(d.properties.p2); })
问题
我强烈怀疑您尚未完全共享您的确切代码 - 如果您有，则不应绘制任何内容，因为路径将放置在无效的 SVG 元素中: <undefined></undefined> .
通常，您可以使用连接来重新选择元素(即使不需要它)，因为它会返回输入和更新选择。但是你没有使用 selection.join()在这里正确。首次添加路径时，您通常会指定要加入的元素类型作为传递给 .join 的参数。 ，而不是使用 selection.append() : 
       selection.join('path')
不指定要创建的元素类型将创建如下元素: <undefined></undefined> .源代码显示了如何在 join 语句中输入元素: 
 enter.append(onenter + "");
在哪里 onenter是传递给 .join 的第一个参数.
由于您没有指定有效的 SVG 元素，SVG 不知道如何呈现它，或者它的子元素(路径): 

var svg = d3.select("svg");

var rects = svg.selectAll("rect")
  .data([1,2])
  .join()
  .append("rect")
  .attr("x", d=>d*100+50)
  .attr("y", 100)
  .attr("width", 30)
  .attr("height", 30)
  .attr("fill","crimson");
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.min.js"></script>
<svg></svg>

最终你应该使用 .join("path") - 为了比较，以下分解了每个发生的情况:
  • selection.join()
  • selection.join().append("p")
  • selection.join("p"); 

    • // Don't specify any tag:
    var a = d3.select("div")
      .selectAll(null) // this doesn't affect the type of element entered in the join
      .data([1])
      .join()
      .text("a");
      
    console.log(".join() :", a.node(), "parent:", a.node().parentNode);

    // join without specifying a tag, then append
    var b = d3.select("div")
      .selectAll(null)
      .data([1])
      .join()
      .append("p")
      .text("b");
      
    console.log(".join().append('p') : ", b.node(), "parent:", b.node().parentNode);

    // Specify the type of element to join (the correct method):
    var c = d3.select("div")
      .selectAll(null)
      .data([1])
      .join("p")
      .text("c");
      
    console.log(".join('p') :", c.node(), "parent:", c.node().parentNode);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.min.js"></script>
    <div></div>

    关于javascript - D3根据数据更新颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65299334/

    25 4 0
    文章推荐： python - 为什么检索到的数据显示为空白而不是输出正确的数字？
    文章推荐： opengl - 在 OpenGL 中，为什么我们在世界空间中默认位于 (0,0,0)？
    文章推荐： javascript - 为什么这个脚本不接受任何阿拉伯语输入？
    文章推荐： c++ - 如何根据初始化参数修复类函数行为
    行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    全站热门文章
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com