小编row*_*oat的帖子

d3.js 为 Y 轴包装长标签

参考Mike Bostock 的这个示例,我想将相同的想法应用于 X 和 Y 切换的条形图。所以标签沿着 Y 轴上下运行。

在这个小提琴中:http : //jsfiddle.net/2eLW6/我只是从 Mike 的示例中复制 wrap 函数并将其应用于我的图表。

function wrap(text, width) {
text.each(function() {
  var text = d3.select(this),
        words = text.text().split(/\s+/).reverse(),
        word,
        line = [],
        lineNumber = 0,
        lineHeight = 1.1, // ems
        y = text.attr("y"),
        dy = parseFloat(text.attr("dy")),
        tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
    while (word = words.pop()) {
      line.push(word);
      tspan.text(line.join(" "));
      if (tspan.node().getComputedTextLength() > width) {
        line.pop();
        tspan.text(line.join(" "));
        line = [word];
        tspan = …
Run Code Online (Sandbox Code Playgroud)

javascript d3.js

5
推荐指数
1
解决办法
5288
查看次数

在"click"事件回调中将参数传递给d3

这是我的代码:

function toggleClass(element, className){
  d3.select(element).classed(className, !d3.select(element).classed(className));
}

d3.selectAll("rect").on("click", toggleClass(this, "clicked");
Run Code Online (Sandbox Code Playgroud)

我无法让它工作,似乎将参数传递给DOM事件是坏消息.有谁知道解决这个问题?

谢谢

javascript d3.js

5
推荐指数
1
解决办法
7706
查看次数

d3为每个选择使用不同的X比例和Y比例域

这是关于jsfiddle的项目:http://jsfiddle.net/mLnB3/

我有这种格式的数据:

var data = [
{
    "category": "Category1",
    "subcategories": [
        {
            "subcategory": "Subcategory1A",
            "comments": [
                {
                    "comment" : "1Acomment1",
                    "count": 8,
                },
                {
                    "comment": "1Acomment2",
                    "count": 7
                }
            ]
        },
        {
            "subcategory": "Subcategory1B",
            "comments": [
                {
                    "comment": "1Bcomment1",
                    "count": 11,
                }
            ]
        },
        {
            "subcategory": "Subcategory1C",
            "comments": [
                {
                    "comment": "1Ccomment1",
                    "count": 2,
                }
            ]
        }
    ]
},
{
    "category": "Category2",
    "subcategories": [
        {
            "subcategory": "Subcategory2A",
            "comments": [
                {
                    "comment": "2Acomment1",
                    "count": 6,
                },
                {
                    "comment": …
Run Code Online (Sandbox Code Playgroud)

javascript charts svg d3.js

4
推荐指数
1
解决办法
5180
查看次数

标签 统计

d3.js ×3

javascript ×3

charts ×1

svg ×1