javascript - 如何将文本附加到 d3js v4 中的规范化堆叠图表-6ren

javascript - 如何将文本附加到 d3js v4 中的规范化堆叠图表

转载作者：行者123 更新时间：2023-11-29 23:55:02

26

4

我正在尝试将文本附加到 d3js v4 中的规范化堆叠图表，类似于 this

但对应柱的值显示在柱内。

这是链接中的代码。

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  .bar {
    fill: steelblue;
  }

  .axis path {
    display: none;
  }
</style>
<svg width="960" height="870"></svg>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
  var svg = d3.select("svg"),
    margin = {
      top: 20,
      right: 60,
      bottom: 30,
      left: 40
    },
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  var y = d3.scaleBand()
    .rangeRound([0, width])
    .padding(0.1)
    .align(0.1);

  var x = d3.scaleLinear()
    .rangeRound([height, 0]);

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

  var stack = d3.stack()
    .offset(d3.stackOffsetExpand);

  d3.csv("data.csv", type, function(error, data) {
    if (error) throw error;

    data.sort(function(a, b) {
      return b[data.columns[1]] / b.total - a[data.columns[1]] / a.total;
    });

    y.domain(data.map(function(d) {
      return d.State;
    }));
    z.domain(data.columns.slice(1));

    var serie = g.selectAll(".serie")
      .data(stack.keys(data.columns.slice(1))(data))
      .enter().append("g")
      .attr("class", "serie")
      .attr("fill", function(d) {
        return z(d.key);
      });

    serie.selectAll("rect")
      .data(function(d) {
        return d;
      })
      .enter().append("rect")
      .attr("y", function(d) {
        return y(d.data.State);
      })
      .attr("x", function(d) {
        return x(d[1]);
      })
      .attr("width", function(d) {
        return x(d[0]) - x(d[1]);
      })
      .attr("height", y.bandwidth());

    g.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x).ticks(10, "%"));

    g.append("g")
      .attr("class", "axis axis--y")
      .call(d3.axisLeft(y));

    var legend = serie.append("g")
      .attr("class", "legend")
      .attr("transform", function(d) {
        var d = d[0];
        return "translate(" +  ((x(d[0]) + x(d[1])) / 2) + ", " +(y(d.data.State) - y.bandwidth())+ ")";
      });

    legend.append("line")
      .attr("y1", 5)
      .attr("x1", 15)
      .attr("x2", 15)
      .attr("y2", 12)
      .attr("stroke", "#000");

    legend.append("text")
      .attr("x", 9)
      .attr("dy", "0.35em")
      .attr("fill", "#000")
      .style("font", "10px sans-serif")
      .text(function(d) {
        return d.key;
      });
  });

  function type(d, i, columns) {
    for (i = 1, t = 0; i < columns.length; ++i) t += d[columns[i]] = +d[columns[i]];
    d.total = t;
    return d;
  }
</script>

这是数据集(csv):

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
MA,383568,701752,341713,665879,1782449,1751508,871098
MI,625526,1179503,585169,974480,2628322,2706100,1304322
MN,358471,606802,289371,507289,1416063,1391878,650519
MS,220813,371502,174405,305964,764203,730133,371598
MO,399450,690476,331543,560463,1569626,1554812,805235
MT,61114,106088,53156,95232,236297,278241,137312
NE,132092,215265,99638,186657,457177,451756,240847
NV,199175,325650,142976,212379,769913,653357,296717
NH,75297,144235,73826,119114,345109,388250,169978
NJ,557421,1011656,478505,769321,2379649,2335168,1150941
NM,148323,241326,112801,203097,517154,501604,260051
NY,1208495,2141490,1058031,1999120,5355235,5120254,2607672
NC,652823,1097890,492964,883397,2575603,2380685,1139052
ND,41896,67358,33794,82629,154913,166615,94276
OH,743750,1340492,646135,1081734,3019147,3083815,1570837
OK,266547,438926,200562,369916,957085,918688,490637
OR,243483,424167,199925,338162,1044056,1036269,503998
PA,737462,1345341,679201,1203944,3157759,3414001,1910571
RI,60934,111408,56198,114502,277779,282321,147646
SC,303024,517803,245400,438147,1193112,1186019,596295
SD,58566,94438,45305,82869,196738,210178,116100
TN,416334,725948,336312,550612,1719433,1646623,819626
TX,2027307,3277946,1420518,2454721,7017731,5656528,2472223
UT,268916,413034,167685,329585,772024,538978,246202
VT,32635,62538,33757,61679,155419,188593,86649
VA,522672,887525,413004,768475,2203286,2033550,940577
WA,433119,750274,357782,610378,1850983,1762811,783877
WV,105435,189649,91074,157989,470749,514505,285067
WI,362277,640286,311849,553914,1487457,1522038,750146
WY,38253,60890,29314,53980,137338,147279,65614

最佳答案

我会这样做:

var textAndRect = serie.selectAll("g")
  .data(function(d) {
    d.forEach(function(d0){
      d0.key = d.key;
    })
    return d;
  })
  .enter().append("g")
  .attr("transform", function(d){
    return "translate(" + [x(d[1]), y(d.data.State)]  + ")";
  })

textAndRect.append("rect")
  .attr("width", function(d) {
    return x(d[0]) - x(d[1]);
  })
  .attr("height", y.bandwidth());

textAndRect.append("text")
  .text(function(d){
    return d.data[d.key];
  })
  .attr("x", function(d){
    return (x(d[0]) - x(d[1])) / 2;
  })
  .attr("dy", "1.1em")
  .style("font-family","arial")
  .style("fill", "black")
  .style("font-size", "7pt")
  .style("text-anchor", "middle");

运行代码是here .

关于javascript - 如何将文本附加到 d3js v4 中的规范化堆叠图表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41897757/

26

4

0

文章推荐： java - JDBC MySQL 提示连接过多

文章推荐：每秒 svg 的 Javascript setAttribute

文章推荐： javascript - 使用 strict 和 gulp

css - 如何调整 Firefox 附加 SDK 弹出窗口/面板的大小？ Firefox 附加 SDK 弹出窗口/面板太小
我关注了 tutorial on creating a popup for an add-on在 Firefox 中，效果很好。我现在遇到的问题是它创建的弹出窗口不会更改大小以适应我添加到其中的内容
覆盖后的FFmpeg concat(附加)
我有一些视频，我需要连接一个标题并添加一些覆盖，问题是我需要先做覆盖，否则时间不正确，然后才将标题连接到视频的开头 ffmpeg -i talk.mp4 -i start_pancarte.png
Powershell 附加 CSV
我正在尝试附加一个 CSV 文件。这是我正在使用的线路。不幸的是，我找不到 export-csv 的附加选项。任何想法都有助于使其发挥作用。 Get-ADGroupMember "Domain Adm
Java 附加 API
我正在努力理解 Attach API (com.sun.tools.attach.*) 的用途。它的典型用途是什么？它是为了“模拟”JVM，以便您可以在不部署/启动代码的情况下测试您的代码吗？它是一个
python - BeautifulSoup 附加
我不明白为什么这不起作用。 soup_main = BeautifulSoup('FooBar') soup_append = BeautifulSoup('Meh') soup_main.body.
php - 附加 where 子句
我有以下代码来返回我想要的字符串 $sql = " SELECT `description` FROM `auctions` WHERE `description` REGEX
Javascript 附加 - 使用数组中的值附加多个元素
我正在尝试从数组中附加具有多个值的元素，但我做错了。这是我的代码: for(var i=0; i ` + pricesArray[i].start_date ` ` + pricesArray[i
附加 Javascript 图像吗？
我正在尝试将图像链接添加到此 javascript 附加表中。使图像位于按钮上方这是代码 $("#1").append(""+section+""+no+""+price+""+button+""
Javascript 附加 + 单击删除它们
我有一个问题，我已经解决了，但它太烦人了。我有一个 js 代码，当使用“追加”按下按钮时，它会放下一些 html 代码，并且通过该代码，我为 x 按钮提供了一个 id，并为容器元素提供了一个 id。
go - “附加”的工作方式是什么？
我想逐行读取文件，并且每一行可能都有很多字符。这个版本的readline效果很好 func readLine(r *bufio.Reader) ([]byte, error) { var (
php - 在文本文件中创建或写入/附加
我有一个网站，每次用户登录或注销时，我都会将其保存到文本文件中。如果不存在，我的代码在附加数据或创建文本文件时不起作用。这是示例代码 $myfile = fopen("logs.txt", "wr"
reactjs - typescript 附加 Prop
我正在尝试使用 typescript 和 Formik 创建一个自定义输入字段。我可以就完成以下代码的最佳方式获得一些帮助吗？我需要添加额外的 Prop 标签和名称......我已经坚持了一段时间，希
jQuery 附加 html 与附加现有元素
我有一个字符串 big_html，我想将它添加到某个 div 中。我观察到以下方面的性能差异: $('#some-div').append( big_html ); // takes about 10
json - FormData 附加 JSON
如何使用 FormData 创建以下结果 ------WebKitFormBoundaryOmz20xyMCkE27rN7 Content-Disposition: form-data; name="
jquery - 附加 jQuery 事件处理程序以便首先触发它们
有没有办法附加 jQuery 事件处理程序，以便在任何先前附加的事件处理程序之前触发该处理程序？我遇到了this article ，但代码不起作用，因为事件处理程序不再存储在数组中，而这正是他的代码所
iphone - 附加 XCode 调试器
我正在开发一个需要网络登录的 iPhone 应用程序。像往常一样我打电话 [[UIApplication sharedApplication] openURL:loginURL]; 这将关闭应用程序并
firefox-addon - 如何制作仅可用于特定站点的Firefox扩展(附加)？
我想开发一个仅针对特定域激活的扩展。我不希望它在不浏览此特定域时出现在浏览器菜单中。有可能这样做吗？最佳答案可能：对于菜单，您可以添加一个弹出窗口侦听器，用于检查当前加载的URL（docs f
javascript - 附加 cookie 的新值
这段 JavaScript 代码 function writeCookie(CookieName, CookieValue, CookieDuration) { var expiration
javascript - jQuery 附加 Handlebars
我正在使用 Handlebars 来渲染使用ajax从本地服务器获得的信息。我的 HTML 看起来像: {{#each Tabs}}
javascript - 附加 html 后欧芹不起作用
我尝试了以下代码，但当输入框中没有数据时它不会通知。当我直接添加此内容(不附加)时，它会起作用。我在这里做错了什么 var output = "\n"+ "\n"+

首页

博学

6Ren·AI

商城

javascript - 如何将文本附加到 d3js v4 中的规范化堆叠图表