javascript - 将 D3 工具提示应用于 donut 倍数-6ren

javascript - 将 D3 工具提示应用于 donut 倍数

转载作者：行者123 更新时间：2023-12-03 12:14:52

27

4

我有这样的代码，可以创建多个 D3 donut 倍数。

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
}

svg {
  padding: 10px 0 0 10px;
}

.arc {
  stroke: #fff;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var radius = 74,
    padding = 10;

var color = d3.scale.ordinal()
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

var arc = d3.svg.arc()
    .outerRadius(radius)
    .innerRadius(radius - 30);

var pie = d3.layout.pie()
    .sort(null)
    .value(function(d) { return d.population; });

d3.csv("data.csv", function(error, data) {
  color.domain(d3.keys(data[0]).filter(function(key) { return key !== "State"; }));

  data.forEach(function(d) {
    d.ages = color.domain().map(function(name) {
      return {name: name, population: +d[name]};
    });
  });

  var legend = d3.select("body").append("svg")
      .attr("class", "legend")
      .attr("width", radius * 2)
      .attr("height", radius * 2)
    .selectAll("g")
      .data(color.domain().slice().reverse())
    .enter().append("g")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

  legend.append("rect")
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", color);

  legend.append("text")
      .attr("x", 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .text(function(d) { return d; });

  var svg = d3.select("body").selectAll(".pie")
      .data(data)
    .enter().append("svg")
      .attr("class", "pie")
      .attr("width", radius * 2)
      .attr("height", radius * 2)
    .append("g")
      .attr("transform", "translate(" + radius + "," + radius + ")");

  svg.selectAll(".arc")
      .data(function(d) { return pie(d.ages); })
    .enter().append("path")
      .attr("class", "arc")
      .attr("d", arc)
      .style("fill", function(d) { return color(d.data.name); });

  svg.append("text")
      .attr("dy", ".35em")
      .style("text-anchor", "middle")
      .text(function(d) { return d.State; });

});

</script>

我正在寻找一种实现 D3 工具提示的方法，以便当我将光标放在 donut 上时可以看到 donut 每个 block 的确切数据。据我所知，这里还有其他工具提示示例，但它们都不适用于 donut 倍数示例。

这是一些示例数据

State,Under 5 Years,5 to 13 Years,14 to 17 Years,18 to 24 Years,25 to 44 Years,45 to 64 Years,65 Years and Over
AL,310504,552339,259034,450818,1231572,1215966,641667
AK,52083,85640,42153,74257,198724,183159,50277
AZ,515910,828669,362642,601943,1804762,1523681,862573
AR,202070,343207,157204,264160,754420,727124,407205
CA,2704659,4499890,2159981,3853788,10604510,8819342,4114496
CO,358280,587154,261701,466194,1464939,1290094,511094
CT,211637,403658,196918,325110,916955,968967,478007
DE,59319,99496,47414,84464,230183,230528,121688
DC,36352,50439,25225,75569,193557,140043,70648
FL,1140516,1938695,925060,1607297,4782119,4746856,3187797
GA,740521,1250460,557860,919876,2846985,2389018,981024
HI,87207,134025,64011,124834,356237,331817,190067
ID,121746,201192,89702,147606,406247,375173,182150
IL,894368,1558919,725973,1311479,3596343,3239173,1575308
IN,443089,780199,361393,605863,1724528,1647881,813839
IA,201321,345409,165883,306398,750505,788485,444554
KS,202529,342134,155822,293114,728166,713663,366706
KY,284601,493536,229927,381394,1179637,1134283,565867
LA,310716,542341,254916,471275,1162463,1128771,540314
ME,71459,133656,69752,112682,331809,397911,199187
MD,371787,651923,316873,543470,1556225,1513754,679565

该 D3 文档可以在以下位置找到: http://bl.ocks.org/mbostock/3888852

最佳答案

当您说“D3 工具提示”时，我不确定您指的是什么，因为 d3 没有任何内置工具提示功能。也就是说，有一些很好的第三方插件可以在 d3 中提供工具提示。

d3-tip是一个非常适合您想要做的事情的方法。

您可以创建一个工具提示函数来显示每个弧线的人口数据，如下所示:

var tip = d3.tip()
  .attr('class', 'd3-tip')
  .html(function(d) { return d.data.population; })
  .direction('s');

然后您可以在 svg 选择上调用该函数:

svg.call(tip);

最后，您可以在弧上使用鼠标事件监听器来显示和隐藏工具提示:

svg.selectAll(".arc")
  .data(function(d) { return pie(d.ages); })
  .enter().append("path")
    .attr("class", "arc")
    .attr("d", arc)
    .style("fill", function(d) { return color(d.data.name); })
    .on('mouseover', tip.show)
    .on('mouseout', tip.hide);

这是一个PLUNK有一个工作示例。

您还可以查看 d3-tip 文档 here .

关于javascript - 将 D3 工具提示应用于 donut 倍数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24768819/

27

4

0

文章推荐： javascript - 隐藏父级的 jQuery 脚本不起作用 - Wordpress

文章推荐： JavaScript RegExp 替换 HTML 注释

文章推荐： JavaScript - 在函数回调之间共享值

php - 四舍五入到最接近和最小的 10 倍数
所以这是我的情况。我有几个数字，我想四舍五入到最接近和最小的 10 的倍数。例如，介于51到59之间的值应四舍五入到50。 Input = 59 = >Respose = 50 Input = 51
javascript - 选择指定值时清除 select2 倍数
我尝试在 select2 多重选择中实现以下场景。用户选择一些选项用户在选择中选择“无必需程序” Select 会清除所有选定的值 Select 有一个占位符，其中包含以下文本:“无必需功能” 这
javascript - 将变量四舍五入为下一个最接近的 X 倍数
我正在寻找一种方法将数字四舍五入为最接近的 250 的倍数。例如，如果我有以下 JS: var containerHeight = $("#container").height(); ...我们假设“
javascript - AngularJS 倍数 http.get
大家好，我是 AngularJS 的新手，我在调用多个 http.get 时遇到问题。 $scope.countries 正在从城市获取值(value)。发生了什么事？如何调用多个http.get？
python - ** (倍数) 在 Python 中
这个问题在这里已经有了答案: 关闭 11 年前。 Possible Duplicate: What does the ** operator do in Python? 以下 python 代码中的
css - SCSS 值(value)倍数
我想用 scss 做点什么。我基本上想要它，所以我可以为每 5px 留出任何余量。因此，例如我可以写 m10 m15 m20 m25 等......它会创建 margin:10px;边距:15px；等
c# - KeyDown 和 KeyUp 倍数
我正在用 C Sharp 创建一架钢琴，目前我有键盘键来播放声音。例如，键 A 播放音符 C。我遇到的问题是我想同时按下多个键并发出声音。显然我不想将所有组合都放在 keyDown 类中，因为我将不得
ruby-on-rails - Rails-输入类型="file"倍数
我仍在寻找Rails优雅的多文件上传方式。我刚刚了解了“输入类型=”文件”多个” Rails支持吗？有什么例子吗？在Rails中如何实现将多张照片上传到相册模板的技巧？谢谢最佳答案您需要的是更
javascript - 将 D3 工具提示应用于 donut 倍数
我有这样的代码，可以创建多个 D3 donut 倍数。 body { font: 10px sans-serif; } svg { padding: 10px 0 0 10px; } .
python - numpy 中最接近的 0.2 倍数？
如何在 numpy 中将数字取整到最接近 0.2 的倍数？例如，我有这个: 0.2 * np.floor(xi / 0.2) 它在大多数情况下都有效，例如 >>> xi = 9.4 >>> 0.2
c# - 如何将 float 舍入到最接近的 n 倍数？
这个问题在这里已经有了答案: Rounding numbers to specific multiples [duplicate] (1 个回答) 关闭 6 年前。我有一个花车。我想将它舍入到最接
java - 在 Java 中四舍五入到最接近的其他 double 倍数？
我意识到这不是一个很好的标题，所以我会尝试更彻底地解释。基本上，我有一个只有少量变化的 double 值，称为 clusterSize。然后，我有第二个 double 值，即 map 上的纬度或经度
javascript - 如何在 Javascript 中始终向下舍入到最接近的 X 倍数？
我在 Canvas 上绘制了一个网格，当用户点击网格时，我正在绘制一个矩形。我想始终在用户单击的网格单元格顶部绘制矩形。所以我需要向下舍入到最接近的 X，在我的例子中，是 40 的倍数。一些例子..
java - 某些基本 float 单位的四舍五入为偶数(或奇数)倍数
如何舍入为某些基本浮点单位的偶数倍(例如 0.0005f) float example_input = 2.718281828459f; float unit = 0.0005f; 使得输出的形式为2
java - 在 Java 中将价格四舍五入到最接近的 5cent 倍数
我是 Java 编程的新手。我想将价格四舍五入到最接近的小数点后两位。例如 38.82 变成 38.80 38.87 变成 38.90 38.85 保持不变。我做了例如1 和例如2 但结果只有小数点
c++ - 如何返回另一个 float 的最接近的可表示 float 倍数？
我在 float 中给出了值和步数，例如: double step = 0.4; double value = 47.7121; 对于我给出的每个值和步骤对，我需要返回步骤的最接近的可表示 float
php - 如何删除安装在 Apache 中的较旧的 PHP 倍数？
我正在尝试在我的一台服务器上运行 Drupal 8，但是在浏览器中安装 Drupal 期间，它为我提供了与运行 php -v 时不同的 PHP 版本 (7.0.23) > 在命令行 (7.1.12)
javascript - 通过 JavaScript 将数字四舍五入到最接近的 0.11 倍数
我需要将数字四舍五入到最接近的 0.11 倍数或四舍五入整数示例: 0.99 turns to 1.00 0.87 turns to 0.88 0.59 turns to 0.55 54.01 tu
c++ - 将 double 转换为 10 的 int 倍数
我有一个从公式计算的 double 列表。例如，其中一个 double 是 88.32547。我想将它们转换为最接近的 10 的整数倍，并将它们放入另一个变量中。在示例中，double a = 88
javascript - 带有链接焦点/鼠标悬停工具提示的 D3 倍数 : Crosshair focus line not fitting to x-axis
我正在尝试合并 this multiples example在 this example 中看到焦点鼠标悬停 + 十字准线功能.我预期的 y 大小的十字准线一直在 x 线上射击。 See workin

首页

博学

6Ren·AI

商城

javascript - 将 D3 工具提示应用于 donut 倍数