程序员经验分享-hwhale

d3 过滤后无法附加完整数据

2023-12-31

我有一个项目的简化版本，我将其浓缩为以下片段：

var margins = {top:20, bottom:300, left:100, right:100};

var height = 600;
var width = 1200;

var totalWidth = width+margins.left+margins.right;
var totalHeight = height+margins.top+margins.bottom;

var svg = d3.select('body')
    .append('svg')
    .attr('width', totalWidth)
    .attr('height', totalHeight);

var graphGroup = svg.append('g')
    .attr('transform', "translate("+margins.left+","+margins.top+")");

var data = [
  {'manager':'ABC-CA', 'aum':230561804112.86996, 'type':'JV'},
  {'manager':'AEGON-Industrial', 'aum':187676730861.82004, 'type':'JV'},
  {'manager':'AVIC', 'aum':677643221.8599999, 'type':'DM'},
  {'manager':'AXA-SPDB', 'aum':111220010833.66998, 'type':'JV'},
  {'manager':'Baoying', 'aum':26328526612.41, 'type':'DM'},
  {'manager':'Beixin Ruifeng', 'aum':10500065729.3, 'type':'JV'},
  {'manager':'BOB-Scotiabank', 'aum':69159188249.67, 'type':'JV'},
  {'manager':'BOC IM', 'aum':396466612963.73, 'type':'DM'},
  {'manager':'BOCI Securities', 'aum':57940275708.97, 'type':'JV'}
];

  var yExtents = d3.extent(data, function(d) {return d.aum; })

  var xScale = d3.scaleBand()
    .rangeRound([0, width])
    .domain(data.map(function(d) {return d.manager; }));

  var yScale = d3.scaleLinear()
      .range([height,0])
      .domain(yExtents);

  graphGroup.append("g")
      .attr("class", "axis axis--y")
      .attr("transform", "translate(0," + 0 + ")")
      .call(d3.axisRight(yScale))
      .selectAll("text")
      .attr('text-align','right')
      .attr("transform", "translate(-90,0)");

  graphGroup.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(xScale))
      .selectAll("text")
      .attr("transform", "translate(0,0)");


  var bars = graphGroup.selectAll('rect')
    .data(data)
    .enter()
    .append('rect')
    .attr('x', function(d) {return xScale(d.manager); })
    .attr('y', function(d) {return yScale(d.aum); })
    .attr('width', xScale.bandwidth())
    .attr('height', function(d) {return height-yScale(d.aum); })
    .style('fill','#003366');

  d3.select('#rd1').on('click', function() {

    var newData = data;

    bars.data(newData).enter()
        .append('rect');

    bars.transition()
        .duration(750)
        .attr('x', function(d) {return xScale(d.manager); })
        .attr('y', function(d) {return yScale(d.aum); })
        .attr('height', function(d) {return height-yScale(d.aum); })
        .style('fill','#003366');

  });

  d3.select('#rd2').on('click', function() {

    var newData = data.filter(function(d) {return d.type=="JV"});
    bars.data(newData).exit().remove();

    bars.enter()
        .attr('x', function(d) {return xScale(d.manager); })
        .attr('y',height);

    bars.transition()
        .duration(750)
        .attr('x', function(d) {return xScale(d.manager); })
        .attr('y', function(d) {return yScale(d.aum); })
        .attr('height', function(d) {return height-yScale(d.aum); });

  });
<form>
<label class='radio-label'>All <input type="radio" name="level" value="all" checked="checked" id='rd1'></input></label>
<label class='radio-label'>JV <input type="radio" name="level" value="jv" id='rd2'></input></label>
</form>
<script src="https://d3js.org/d3.v5.min.js"></script>

我的目的是通过以下方式过滤数据d.type=='JV'当用户单击“JV”单选按钮时，就可以了。然而，我的“全部”单选按钮功能并没有像我预期的那样工作，并且事实证明对其进行故障排除是有问题的。 “全部”单选按钮应该再次显示整个数据集，但它只显示数据集的一部分，因此它缺少值，我不知道如何使其正确。

在控制台中记录console.log(newData.length)正确的数字是：9，但只附加了 5 个矩形。

Question

我的输入、更新、退出实现是否有缺陷，如果有，我该如何修复它，以便我的数据在过滤后可以再次完整显示？


var margins = {
  top: 20,
  bottom: 300,
  left: 100,
  right: 100
};

var height = 600;
var width = 1200;

var totalWidth = width + margins.left + margins.right;
var totalHeight = height + margins.top + margins.bottom;

var svg = d3.select('body')
  .append('svg')
  .attr('width', totalWidth)
  .attr('height', totalHeight);

var graphGroup = svg.append('g')
  .attr('transform', "translate(" + margins.left + "," + margins.top + ")");

var data = [{
    'manager': 'ABC-CA',
    'aum': 230561804112.86996,
    'type': 'JV'
  },
  {
    'manager': 'AEGON-Industrial',
    'aum': 187676730861.82004,
    'type': 'JV'
  },
  {
    'manager': 'AVIC',
    'aum': 677643221.8599999,
    'type': 'DM'
  },
  {
    'manager': 'AXA-SPDB',
    'aum': 111220010833.66998,
    'type': 'JV'
  },
  {
    'manager': 'Baoying',
    'aum': 26328526612.41,
    'type': 'DM'
  },
  {
    'manager': 'Beixin Ruifeng',
    'aum': 10500065729.3,
    'type': 'JV'
  },
  {
    'manager': 'BOB-Scotiabank',
    'aum': 69159188249.67,
    'type': 'JV'
  },
  {
    'manager': 'BOC IM',
    'aum': 396466612963.73,
    'type': 'DM'
  },
  {
    'manager': 'BOCI Securities',
    'aum': 57940275708.97,
    'type': 'JV'
  }
];

var yExtents = d3.extent(data, function(d) {
  return d.aum;
})

var xScale = d3.scaleBand()
  .rangeRound([0, width])
  .domain(data.map(function(d) {
    return d.manager;
  }));

var yScale = d3.scaleLinear()
  .range([height, 0])
  .domain(yExtents);

graphGroup.append("g")
  .attr("class", "axis axis--y")
  .attr("transform", "translate(0," + 0 + ")")
  .call(d3.axisRight(yScale))
  .selectAll("text")
  .attr('text-align', 'right')
  .attr("transform", "translate(-90,0)");

graphGroup.append("g")
  .attr("class", "axis axis--x")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(xScale))
  .selectAll("text")
  .attr("transform", "translate(0,0)");

function applyData(newData) {
  var bars = graphGroup
    .selectAll('rect')
    .data(newData);

  bars.exit().remove();

  bars.enter()
    .append('rect')
    .attr('x', function(d) {
      return xScale(d.manager);
    })
    .attr('y', height)    
    .attr('width', xScale.bandwidth())
    .style('fill', '#003366')
    .merge(bars)
    .transition()
    .duration(750)
    .attr('x', function(d) {
      return xScale(d.manager);
    })
    .attr('y', function(d) {
      return yScale(d.aum);
    })
    .attr('height', function(d) {
      return height - yScale(d.aum);
    });
}

d3.select('#rd1').on('click', function() {
  applyData(data);
});

d3.select('#rd2').on('click', function() {

  var newData = data.filter(function(d) {
    return d.type == "JV"
  });
  applyData(newData);

});

applyData(data);
<form>
  <label class='radio-label'>All <input type="radio" name="level" value="all" checked="checked" id='rd1'></input></label>
  <label class='radio-label'>JV <input type="radio" name="level" value="jv" id='rd2'></input></label>
</form>
<script src="https://d3js.org/d3.v5.min.js"></script>

选择是不可变的——您无法保存和重复使用bars不同之间的选择data调用。此外，您还需要在 3 个位置复制代码 - 初始数据和每个点击处理程序。我通过将代码提取到一种方法中来重构您的代码。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

d3js

d3 过滤后无法附加完整数据 的相关文章

  • Firebase Function 从其他文件导入函数 - javascript

    我正在使用 javascript 构建 firebase 函数 现在我有很多内部调用函数 我计划将这些函数移动到不同的文件中 以避免 index js 变得非常混乱 下面是当前的文件结构 functions index js interna

  • 如何在 Highcharts / Highstock 上显示 x 轴上的十字线选定值和 y 轴上选定的日期？

    我正在研究这个项目 其中包括在交互式图表上显示历史数据 我得出的结论是 Highcharts Highstock 是最好的选择 因为它提供了最多的定制选项 我想要实现的目标是 当我将鼠标悬停在一个点上时 分别在 x 轴和 y 轴上显示所选值

  • javascript中怪异模式的元素宽度？

    我一直在浏览所有流行的 js 库 但我找不到一个具有 DOM 元素宽度函数的库 该函数实际上可以解释 Internet Explorer 中的怪异模式 问题是 当启用怪异模式时 填充和边框不会计入宽度 据我所知 当省略 doctype 或将

  • Angular.js：未捕获的错误，没有模块：myapp

    我也在尝试引导 angular js 项目 这是我的index html div p Loading p div

  • 在 javascript 中访问 ajax POST 响应

    我正在从 javascript 函数发出 ajax POST 请求 function UpdateMetrics ajax type POST url MyHandler ashx Param1 value1 data contentTyp

  • 如何在 JS Rails 响应中包含 HTML？

    我有一个响应 HTML 和 JS AJAX 查询的 FooController app controllers foo controller rb class FooController lt ApplicationController l

  • 在每页上插入折叠标记 (wkhtmltopdf)

    我正在使用 wkhtmltopdf 0 12 2 1 创建发票等 我需要在 pdf 的每一页上显示折叠标记 如果内容大于一页 如何在每个页面上使用 javascript 重复它们 这是我的基本标记 div class marks div c

  • less.js - 在解析器回调中获取变量值

    我正在使用 less js 1 3 0 在客户端将 less 解析为 css 在解析器的回调中 我想获取每个变量的值 我尝试了以下方法但没有成功 var data colour red example background color co

  • 如何获取传单标记簇中点击事件的图块？

    这是我的代码 function onMapClick e e originalEvent defaultPrevented true var orig e originalEvent console log orig target map

  • JSON对象的长度[重复]

    这个问题在这里已经有答案了 该函数生成一个包含 json 对象的数组 var estoque function unpack estoque tnm total estoque vl id tid st tnm tnm split tota

  • 使用 jquery 通配符检查 cookie 名称

    我有一个生成动态 cookie 的表单 例如 webform 62 1234356 62 1234356 可以是任意数字 我需要使用一些通配符检查来检查名称以 webform 开头的 cookie 是否存在 下面不起作用 if cookie

  • Backbone 中的加载栏

    我想显示加载消息 图标 直到列表中的所有项目都已呈现 这是我的示例中的 jsfiddle http jsfiddle net 9R9zU 58 http jsfiddle net 9R9zU 58 我尝试在 Feed 部分添加一个带有加载栏

  • 如何创建自定义元素扩展类的新实例

    我正在尝试以下示例谷歌开发者网站 https developers google com web fundamentals getting started primers customelements extendhtml我收到错误 Typ

  • express 或express-generator：我需要两者吗？

    只是探索 Node js 并遇到了 Express 在 npm 存储库站点上https www npmjs com package express https www npmjs com package express它明确指出安装是 np

  • Javascript 正则表达式来匹配正则表达式

    我正在研究一个特殊的正则表达式来匹配 javascript 正则表达式 现在我有这个正则表达式工作 i g m 例如 foo match i g m gt foo foo undefined foo i match i g m gt foo

  • Javascript 中的线性回归 [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我想在网络浏览器中用 Javascript 进行最小二乘拟合 目前 用户使用 HTML 文本输入输入数

  • 水平平滑滚动 100px

    Heyjo problem 一周以来我一直在寻找 javascript 或 jQuery 代码 以便在我的网站上实现滚动按钮 我失败的那一刻是按钮应该多次工作的时候 他的任务不是滚动到专用元素 而是应该向左滚动 例如 100px 此外 滚动

  • 如何查看网站浏览者的操作系统？

    我运行的是 Ubuntu 8 04 最近在访问网站时收到以下错误 请使用运行 Windows 98 2000 Me NT 或 XP 的计算机返回 www site com 网站如何知道我正在运行哪个操作系统 是仅通过 javascript

  • 如何按字母顺序排序并先小写排序

    如何获得以下排序的结果Food to Eat然后是 食物123 显然 第二个较低的 o 应该将 要吃的食物 带到排序后的第一个项目中 我很惊讶这个问题不容易通过谷歌找到答案 这个壮举没有包含在 javascript 标准中也让我感到惊讶 F

  • 将 div 文本分配给变量然后显示它

    我有一个简单的任务 我试图完成学习 JavaScript 但一直无法找到明确的答案 这是代码 div Testing div 基本上我希望将方框 div 中的文本存储到变量中 然后 我想在页面的不同部分显示该变量的文本 使用上面的代码我得到

随机推荐

热门标签