javascript - d3js 在多行上写标签-6ren

javascript - d3js 在多行上写标签

转载作者：行者123 更新时间：2023-11-28 04:14:47

我正在研究图形，并且在图表方面遇到了一些困难。我想绘制饼图(或 donut )并以两行或更多行显示标签，以便为图表获得更多空间。

这是我的代码

var dataGroupPotential = [];
var pieGroup;
var svg;

processData("pieGPChart");

function processData(chartDivId) {
  $("#pieGPLegend").text("Title : myTitle");

  //Construction du tableau data

  dataGroupPotential.push({
    label: "long text 1 : 100 000 000",
    value: 100000000
  });
  dataGroupPotential.push({
    label: "long text 2 : 200 000 000",
    value: 200000000
  });
  dataGroupPotential.push({
    label: "long text 3 : 300 000 000",
    value: 300000000
  });


  var width = $("#" + chartDivId).width();
  var dividor = 2.75;
  var height = width / dividor;

  //Ajout des éléments svg pour tracer le graphique
  svg = d3.select("#" + chartDivId).append("svg")
    .attr("width", '100%')
    .attr("height", '100%')
    .attr('viewBox', '0 0 ' + Math.min(width, height) + ' ' + Math.min(width, height))
    .attr('preserveAspectRatio', 'xMinYMin')
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");;

  svg.append("g").attr("class", "slices");
  svg.append("g").attr("class", "labels");
  svg.append("g").attr("class", "lines");

  $("#" + chartDivId).height(height);

  drawMyPie(svg, dataGroupPotential, width, height);

  window.addEventListener('resize', function(event) {
    // do stuff here
    var chartDivId = "pieGPChart";
    var width = $("#" + chartDivId).width();
    var dividor = 2.75;
    var height = width / dividor;
    $("#" + chartDivId).height(height);

    drawMyPie(svg, dataGroupPotential, width, height);
  });
}



function drawMyPie(svg, data, width, height) {
  var radius = Math.min(width, height) / 2;

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

  var arc = d3.arc()
    .outerRadius(radius * 0.8)
    .innerRadius(radius * 0.4);

  var outerArc = d3.arc()
    .innerRadius(radius * 0.9)
    .outerRadius(radius * 0.9);

  //svg.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

  var key = function(d) {
    return d.data.label;
  };

  var color = d3.scaleOrdinal(d3.schemeCategory20);
  change(data);

  function mergeWithFirstEqualZero(first, second) {
    var secondSet = d3.set();
    second.forEach(function(d) {
      secondSet.add(d.label);
    });

    var onlyFirst = first
      .filter(function(d) {
        return !secondSet.has(d.label)
      })
      .map(function(d) {
        return {
          label: d.label,
          value: 0
        };
      });
    return d3.merge([second, onlyFirst])
      .sort(function(a, b) {
        return d3.ascending(a.label, b.label);
      });
  }

  function change(data) {
    var duration = 3000;
    var data0 = svg.select(".slices").selectAll("path.slice")
      .data().map(function(d) {
        return d.data
      });
    if (data0.length == 0) data0 = data;
    var was = mergeWithFirstEqualZero(data, data0);
    var is = mergeWithFirstEqualZero(data0, data);

    /* ------- SLICE ARCS -------*/

    var slice = svg.select(".slices").selectAll("path.slice")
      .data(pie(was), key);

    slice.enter()
      .insert("path")
      .attr("class", "slice")
      .style("fill", function(d) {
        return color(d.data.label);
      })
      .each(function(d) {
        this._current = d;
      });

    slice = svg.select(".slices").selectAll("path.slice")
      .data(pie(is), key);

    slice
      .transition().duration(duration)
      .attrTween("d", function(d) {
        var interpolate = d3.interpolate(this._current, d);
        var _this = this;
        return function(t) {
          _this._current = interpolate(t);
          return arc(_this._current);
        };
      });

    slice = svg.select(".slices").selectAll("path.slice")
      .data(pie(data), key);

    slice
      .exit().transition().delay(duration).duration(0)
      .remove();

    /* ------- TEXT LABELS -------*/

    var text = svg.select(".labels").selectAll("text")
      .data(pie(was), key);

    text.enter()
      .append("text")
      .attr("dy", ".35em")
      .style("opacity", 0)
      .text(function(d) {
        return d.data.label;
      })
      .each(function(d) {
        this._current = d;
      });

    //var legend = text.enter();

    //text.append("text")
    //    .attr("dy", "-10")
    //    .style("opacity", 0)
    //    .text(function (d) {
    //        return d.data.label;
    //    })
    //.each(function (d) {
    //    this._current = d;
    //});
    //text.append("text")
    //    .attr("dy", "10")
    //    .style("opacity", 0)
    //    .text(function (d) {
    //        return d.data.label;
    //    })
    //.each(function (d) {
    //    this._current = d;
    //});

    function midAngle(d) {
      return d.startAngle + (d.endAngle - d.startAngle) / 2;
    }

    text = svg.select(".labels").selectAll("text")
      .data(pie(is), key);

    text.transition().duration(duration)
      .style("opacity", function(d) {
        return d.data.value == 0 ? 0 : 1;
      })
      .attrTween("transform", function(d) {
        var interpolate = d3.interpolate(this._current, d);
        var _this = this;
        return function(t) {
          var d2 = interpolate(t);
          _this._current = d2;
          var pos = outerArc.centroid(d2);
          pos[0] = radius * (midAngle(d2) < Math.PI ? 1 : -1);
          return "translate(" + pos + ")";
        };
      })
      .styleTween("text-anchor", function(d) {
        var interpolate = d3.interpolate(this._current, d);
        return function(t) {
          var d2 = interpolate(t);
          return midAngle(d2) < Math.PI ? "start" : "end";
        };
      });

    text = svg.select(".labels").selectAll("text")
      .data(pie(data), key);

    text
      .exit().transition().delay(duration)
      .remove();

    /* ------- SLICE TO TEXT POLYLINES -------*/

    var polyline = svg.select(".lines").selectAll("polyline")
      .data(pie(was), key);

    polyline.enter()
      .append("polyline")
      .style("opacity", 0)
      .each(function(d) {
        this._current = d;
      });

    polyline = svg.select(".lines").selectAll("polyline")
      .data(pie(is), key);

    polyline.transition().duration(duration)
      .style("opacity", function(d) {
        return d.data.value == 0 ? 0 : .5;
      })
      .attrTween("points", function(d) {
        this._current = this._current;
        var interpolate = d3.interpolate(this._current, d);
        var _this = this;
        return function(t) {
          var d2 = interpolate(t);
          _this._current = d2;
          var pos = outerArc.centroid(d2);
          pos[0] = radius * 0.95 * (midAngle(d2) < Math.PI ? 1 : -1);
          return [arc.centroid(d2), outerArc.centroid(d2), pos];
        };
      });

    polyline = svg.select(".lines").selectAll("polyline")
      .data(pie(data), key);

    polyline
      .exit().transition().delay(duration)
      .remove();
  };
}

    svg {
        width: 100%;
        height: 100%;
    }

    path.slice {
        stroke-width: 2px;
    }

    polyline {
        opacity: .3;
        stroke: black;
        stroke-width: 2px;
        fill: none;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.js"></script>


<div class="panel panel-default">
  <div class="panel-body">
    <div style="text-align:center;" class="row">
      <h4 id="pieGPLegend"></h4>
      <div id="pieGPChart"></div>
    </div>
  </div>
</div>

对于标签，我想要类似的东西

long text 1
100 000 000

我已经尝试过一些东西，但没有成功。这是我尝试过的，但我仍然对 d3js 感到困惑

var legend = text.enter();

text.append("text")
    .attr("dy", "-10")
    .style("opacity", 0)
    .text(function (d) {
        return d.data.label;
    })
.each(function (d) {
    this._current = d;
});
text.append("text")
    .attr("dy", "10")
    .style("opacity", 0)
    .text(function (d) {
        return d.data.label;
    })
.each(function (d) {
    this._current = d;
});

欢迎任何帮助、建议、评论!谢谢

达米安

最佳答案

如果您希望始终在冒号后中断文本，最简单的方法是使用 <tspan> :

.append("tspan")
.attr("x", 0)
.attr("dy", "1.3em")
.text(function(d) {
    return d.data.label.split(":")[1];
})

这是经过更改的代码:

var dataGroupPotential = [];
var pieGroup;
var svg;

processData("pieGPChart");

function processData(chartDivId) {
  $("#pieGPLegend").text("Title : myTitle");

  //Construction du tableau data

  dataGroupPotential.push({
    label: "long text 1 : 100 000 000",
    value: 100000000
  });
  dataGroupPotential.push({
    label: "long text 2 : 200 000 000",
    value: 200000000
  });
  dataGroupPotential.push({
    label: "long text 3 : 300 000 000",
    value: 300000000
  });


  var width = $("#" + chartDivId).width();
  var dividor = 2.75;
  var height = width / dividor;

  //Ajout des éléments svg pour tracer le graphique
  svg = d3.select("#" + chartDivId).append("svg")
    .attr("width", '100%')
    .attr("height", '100%')
    .attr('viewBox', '0 0 ' + Math.min(width, height) + ' ' + Math.min(width, height))
    .attr('preserveAspectRatio', 'xMinYMin')
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");;

  svg.append("g").attr("class", "slices");
  svg.append("g").attr("class", "labels");
  svg.append("g").attr("class", "lines");

  $("#" + chartDivId).height(height);

  drawMyPie(svg, dataGroupPotential, width, height);

  window.addEventListener('resize', function(event) {
    // do stuff here
    var chartDivId = "pieGPChart";
    var width = $("#" + chartDivId).width();
    var dividor = 2.75;
    var height = width / dividor;
    $("#" + chartDivId).height(height);

    drawMyPie(svg, dataGroupPotential, width, height);
  });
}



function drawMyPie(svg, data, width, height) {
  var radius = Math.min(width, height) / 2;

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

  var arc = d3.arc()
    .outerRadius(radius * 0.8)
    .innerRadius(radius * 0.4);

  var outerArc = d3.arc()
    .innerRadius(radius * 0.9)
    .outerRadius(radius * 0.9);

  //svg.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

  var key = function(d) {
    return d.data.label;
  };

  var color = d3.scaleOrdinal(d3.schemeCategory20);
  change(data);

  function mergeWithFirstEqualZero(first, second) {
    var secondSet = d3.set();
    second.forEach(function(d) {
      secondSet.add(d.label);
    });

    var onlyFirst = first
      .filter(function(d) {
        return !secondSet.has(d.label)
      })
      .map(function(d) {
        return {
          label: d.label,
          value: 0
        };
      });
    return d3.merge([second, onlyFirst])
      .sort(function(a, b) {
        return d3.ascending(a.label, b.label);
      });
  }

  function change(data) {
    var duration = 3000;
    var data0 = svg.select(".slices").selectAll("path.slice")
      .data().map(function(d) {
        return d.data
      });
    if (data0.length == 0) data0 = data;
    var was = mergeWithFirstEqualZero(data, data0);
    var is = mergeWithFirstEqualZero(data0, data);

    /* ------- SLICE ARCS -------*/

    var slice = svg.select(".slices").selectAll("path.slice")
      .data(pie(was), key);

    slice.enter()
      .insert("path")
      .attr("class", "slice")
      .style("fill", function(d) {
        return color(d.data.label);
      })
      .each(function(d) {
        this._current = d;
      });

    slice = svg.select(".slices").selectAll("path.slice")
      .data(pie(is), key);

    slice
      .transition().duration(duration)
      .attrTween("d", function(d) {
        var interpolate = d3.interpolate(this._current, d);
        var _this = this;
        return function(t) {
          _this._current = interpolate(t);
          return arc(_this._current);
        };
      });

    slice = svg.select(".slices").selectAll("path.slice")
      .data(pie(data), key);

    slice
      .exit().transition().delay(duration).duration(0)
      .remove();

    /* ------- TEXT LABELS -------*/

    var text = svg.select(".labels").selectAll("text")
      .data(pie(was), key);

    text.enter()
      .append("text")
      .attr("dy", ".35em")
      .style("opacity", 0)
      .text(function(d) {
        return d.data.label.split(":")[0] + ":";
      })
      .each(function(d) {
        this._current = d;
      })
      .append("tspan")
      .attr("x", 0)
      .attr("dy", "1.3em")
      .text(function(d) {
        return d.data.label.split(":")[1];
      })
      .each(function(d) {
        this._current = d;
      });

    //var legend = text.enter();

    //text.append("text")
    //    .attr("dy", "-10")
    //    .style("opacity", 0)
    //    .text(function (d) {
    //        return d.data.label;
    //    })
    //.each(function (d) {
    //    this._current = d;
    //});
    //text.append("text")
    //    .attr("dy", "10")
    //    .style("opacity", 0)
    //    .text(function (d) {
    //        return d.data.label;
    //    })
    //.each(function (d) {
    //    this._current = d;
    //});

    function midAngle(d) {
      return d.startAngle + (d.endAngle - d.startAngle) / 2;
    }

    text = svg.select(".labels").selectAll("text")
      .data(pie(is), key);

    text.transition().duration(duration)
      .style("opacity", function(d) {
        return d.data.value == 0 ? 0 : 1;
      })
      .attrTween("transform", function(d) {
        var interpolate = d3.interpolate(this._current, d);
        var _this = this;
        return function(t) {
          var d2 = interpolate(t);
          _this._current = d2;
          var pos = outerArc.centroid(d2);
          pos[0] = radius * (midAngle(d2) < Math.PI ? 1 : -1);
          return "translate(" + pos + ")";
        };
      })
      .styleTween("text-anchor", function(d) {
        var interpolate = d3.interpolate(this._current, d);
        return function(t) {
          var d2 = interpolate(t);
          return midAngle(d2) < Math.PI ? "start" : "end";
        };
      });

    text = svg.select(".labels").selectAll("text")
      .data(pie(data), key);

    text
      .exit().transition().delay(duration)
      .remove();

    /* ------- SLICE TO TEXT POLYLINES -------*/

    var polyline = svg.select(".lines").selectAll("polyline")
      .data(pie(was), key);

    polyline.enter()
      .append("polyline")
      .style("opacity", 0)
      .each(function(d) {
        this._current = d;
      });

    polyline = svg.select(".lines").selectAll("polyline")
      .data(pie(is), key);

    polyline.transition().duration(duration)
      .style("opacity", function(d) {
        return d.data.value == 0 ? 0 : .5;
      })
      .attrTween("points", function(d) {
        this._current = this._current;
        var interpolate = d3.interpolate(this._current, d);
        var _this = this;
        return function(t) {
          var d2 = interpolate(t);
          _this._current = d2;
          var pos = outerArc.centroid(d2);
          pos[0] = radius * 0.95 * (midAngle(d2) < Math.PI ? 1 : -1);
          return [arc.centroid(d2), outerArc.centroid(d2), pos];
        };
      });

    polyline = svg.select(".lines").selectAll("polyline")
      .data(pie(data), key);

    polyline
      .exit().transition().delay(duration)
      .remove();
  };
}

svg {
        width: 100%;
        height: 100%;
    }

    path.slice {
        stroke-width: 2px;
    }

    polyline {
        opacity: .3;
        stroke: black;
        stroke-width: 2px;
        fill: none;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.js"></script>


<div class="panel panel-default">
  <div class="panel-body">
    <div style="text-align:center;" class="row">
      <h4 id="pieGPLegend"></h4>
      <div id="pieGPChart"></div>
    </div>
  </div>
</div>

关于javascript - d3js 在多行上写标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45953810/

文章推荐： javascript - 传单编辑多边形问题

文章推荐： html - 和定位问题

检查用户输入的字符串在 C 中的格式为 "%d/%d/%d/%d/%d"
关闭。这个问题需要debugging details .它目前不接受答案。编辑问题以包含 desired behavior, a specific problem or error, and th
java - 使用此表单获取号码\d\s\d\d\s\d
我试图用这种形式简单地获取数字 28 integer+space+integer+integer+space+integer我试过这个正则表达式 \\s\\d\\d\\s 但我得到了两个数字11 和
d - D 语言是否完全依赖于 D 运行时？
最近一直在学习D语言。我一直对运行时感到困惑。从我能收集到的关于它的信息中，(这不是很多)我知道它是一种有助于 D 的一些特性的运行时。像垃圾收集一样，它与您自己的程序一起运行。但是既然 D 是编译
java - 这两种语法\\d\\d\\d 和\\d{3} 在所有环境中都一样吗？
想问一下这两个正则表达式有区别吗？ \d\d\d 与 \d{3} 我已经在我的本地机器上使用 Java 和 Windows 操作系统对此进行了测试，两者都工作正常并且结果相同。但是，当在 linux
go - 为什么我不能执行 fmt.Sprintf ("%d.%d.%d.%d"，一个...)？
我正在学习 Go，而且我坚持使用 Go 之旅(exercise-stringer.go:https://tour.golang.org/methods/7)。这是一些代码: type IPAddr
java - Java中的正则表达式: Pattern.编译( "J.*\\d[0-35-9]-\\d\\d-\\d\\d")
我在Java正则表达式中发现了一段令我困惑的代码: Pattern.compile( "J.*\\d[0-35-9]-\\d\\d-\\d\\d" ); 要编译的字符串是: String string
ruby - gsub(/(\d{4})\/(\d\d)\/(\d\d)\/(.*)/, '\1-\2-\3-\4' ) 是什么意思？
我在 ruby 代码上偶然发现了这个。我知道\d{4})\/(\d\d)\/(\d\d)\/(.*)/是什么意思，但是\1-\2-\3-\4 是什么意思？最佳答案 \1-\2-\3-\4 是 b
d - 如何在没有 D 运行时编译 D 应用程序？
我一直在努力解决这个问题，这让我很恼火。我了解 D 运行时库。它是什么，它做什么。我也明白你可以在没有它的情况下编译 D 应用程序。就像 XoMB 所做的那样。好吧，XoMB 定义了自己的运行时，但是
Java算法到 "multiply"两个列表列表((A),(B))*((C,C),(D,D))==((A,C,C),(A,D,D), (B,C,C),(B,D,D))
我有两个列表列表，子列表代表路径。我想找到所有路径。 List> pathList1 List> pathList2 当然是天真的解决方案: List> result = new ArrayList>
java - 如何清理和打印\d{3}\d{3}\d{2}\d{2}格式的数字
我需要使用 Regex 格式化一个字符串，该字符串包含数字、字母 a-z 和 A-Z，同时还包含破折号和空格。从用户输入我有02-219 8 53 24 输出应该是022 198 53 24 我正在
d - D 中的表达式模板
目标是达到与this C++ example相同的效果: 避免创建临时文件。我曾尝试将 C++ 示例翻译为 D，但没有成功。我也尝试过不同的方法。 import std.datetime : benc
d - D 中的完美转发？
tl;dr:你好吗perfect forwarding在 D？该链接有一个很好的解释，但例如，假设我有这个方法: void foo(T)(in int a, out int b, ref int c
d - D 中的抽象自动函数
有什么方法可以在 D 中使用abstract auto 函数吗？如果我声明一个类如下: class MyClass { abstract auto foo(); } 我收到以下错误: mai
d - D 中的切片交集
有没有人为内存中重叠的数组切片实现交集？算法在没有重叠时返回 []。当 pretty-print (使用重叠缩进)内存中重叠的数组切片时，我想要这个。最佳答案如果您确定它们是数组，那么只需取 p
d - D 中循环索引变量的默认类型是什么？
我已经开始学习 D，但我在使用 Andrei Alexandrescu 所著的 The D Programming Language 一书中提供的示例时遇到了一些麻烦。由于 int 和 ulong 类
d - D 中唯一的不可变类
如何创建一个不可变的类？我的目标是创建一个实例始终不可变的类。现在我只是用不可变的方法和构造函数创建了一个“可变”类。我将其称为 mData，m 表示可变。然后我创建一个别名 alias immut
d - D 中的扩展函数
不久前我买了《The D Programming Language》。好书，很有教育意义。但是，我在尝试编译书中列出的语言功能时遇到了麻烦:扩展函数。在这本书中，Andrei 写了任何可以像这样调用
d - D 中的无限数据结构
我在 D http://www.digitalmars.com/d/2.0/lazy-evaluation.html 中找到了函数参数的惰性求值示例我想知道如何在 D 中实现可能的无限数据结构，就像
c - printf ("%d %d %d\n",++a, a++,a) 输出
这个问题在这里已经有了答案: 12 年前关闭。 Possible Duplicate: Could anyone explain these undefined behaviors (i = i++
d - D:查找具有特定属性的所有功能
当前是否可以跨模块扫描/查询/迭代具有某些属性的所有函数（或类）？例如： source/packageA/something.d: @sillyWalk(10) void doSomething()

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - d3js 在多行上写标签