个人中心
gpt4 book ai didi

javascript - d3.js 中的排序条不会改变条的位置

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

我有一个用于对 d3 中的条形图进行排序的脚本，但不知何故，这些条形图没有移动。有人可以告诉我缺少什么吗？

<!DOCTYPE html>
<meta charset='utf-8'>

<head>
  <title>Simple Bar Chart</title>
</head>

<body>
  <div id="buttons">
    <p>Sort by</p>
    <div class="button current" data-val="A">value</div>
    <div class="button" data-val="B">week</div>
    <div class="clr"></div>
  </div>
  <div class='container'>
    <div id='viz'></div>
  </div>
  <script src='https://d3js.org/d3.v4.min.js'></script>
  <script>

    var sdata = d3.range(10).map(function (d) {
      return {
        id: d,
        week: 1 + Math.floor(Math.random() * 9),
        value: Math.floor(Math.random() * 20)
      };
    });


    // Setting the margin and dimensions of the work area
    var margin = {
        top: 50,
        right: 20,
        bottom: 30,
        left: 30
      },
      width = 760 - margin.left - margin.right,
      height = 280 - margin.top - margin.bottom;

    // Creating the scale variables and setting the ranges
    var xScale = d3.scaleBand().rangeRound([0, width]).padding(0.1),
      yScale = d3.scaleLinear().rangeRound([height, 0]);

    // Adjusting data by assigning domain to the range of the scale

    var xscale = d3.scaleBand()
      .domain(sdata.map(function (d) {
        return d.week;
      }))
      .range([margin.left, width])
      .padding(0.1);

    // Appending the svg object to the div on the page
    var svg = d3.select('#viz').append('svg')
      .attr('width', width + margin.left + margin.right)
      .attr('height', height + margin.top + margin.bottom);

    // Appending the 'group' element to the svg
    // Moving the 'group' element to the top left margin
    var g = svg.append('g')
      .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');


    // Creating chart
    g.selectAll('bar')
      .data(sdata)
      .enter().append('rect')
      .attr('class', 'bar')
      .attr('x', function (d, i) {
        return 50 * i
      })
      .attr('height', function (d) {
        return height - d.value;
      })
      .attr('y', function (d) {
        return d.value;
      })
      .attr('width', 30);


    g.selectAll(".bar-label")
      .data(sdata)
      .enter()
      .append("text")
      .classed("bar-label", true)
      .attr("transform", function (d, i) {
        return "translate(" + (i * 50) + "," + (height + 15) + ")" +
          " rotate(45)"
      })
      .attr("text-anchor", "left")
      .text(function (d) {
        return 'wk' + d.week
      })

    g.selectAll(".bar-label2")
      .data(sdata)
      .enter()
      .append("text")
      .classed("bar-label", true)
      .attr("transform", function (d, i) {
        return "translate(" + (i * 50) + "," + (height - 15) + ")" +
          " rotate(45)"
      })
      .attr("text-anchor", "left")
      .text(function (d) {
        return 'id: ' + d.id
      })

    //update 
    d3.selectAll(".button").on("click", function () {
      selected = d3.select(this).attr("data-val");
      console.log(selected)
      update(sdata, selected)
    })

    function update(data, selected) {
      data
        .sort((a, b) =>
          selected === "A" ?
          d3.descending(a.value, b.value) :
          d3.descending(a.week, b.week)
        );
      console.log(data)
      d3.selectAll('bar')
        .transition()
        .attr('x', function (d, i) {
          return 50 * i
        })
    }
  </script>
</body>

最佳答案

问题是，当您对数组进行排序时，您不会更改连接到 d3 bar 对象的数据。请注意，在示例中使用 .data() 中的 key 参数非常重要(默认情况下 d3 使用数组索引作为键)。您需要执行以下操作:

首先，更改图表创建代码中的键映射(并将 bar 选择器替换为 .bar 选择器):

来自

// Creating chart
g.selectAll('bar').data(sdata)

至

// Creating chart
g.selectAll('.bar').data(sdata, function(d){return d.id})

第二，向更新函数添加数据映射(并将 bar 选择器替换为 .bar 选择器):

来自

d3.selectAll('bar')
        .transition()

至

d3.selectAll('.bar').data(data, function(d){return d.id})
        .transition()

关于javascript - d3.js 中的排序条不会改变条的位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59922655/

25 4 0
文章推荐： php - 获取 WooCommerce 中的所有产品类别
文章推荐： c# - 垃圾邮件中发送的邮件
文章推荐： mule - Windows Server 服务总线对比 NServicebus 对比 Mule ESB
文章推荐： mysql - SQL 连接和 MySQL
行者123
个人简介

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

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