相关疑难解决方法(0)

SVG文本中的自动换行

我想<text>在SVG中显示一个自动换行到容器<rect>的内容,就像HTML文本填充<div>元素一样.有办法吗?我不想使用<tspan>s 来定位线条.

xml svg text word-wrap

97
推荐指数
7
解决办法
11万
查看次数

如何在 d3.axis.tickFormat 中换行?

我想编写一个函数,返回带有两行文本的刻度标签。正如我所看到的,svg 文本标签用于文本标签。有没有办法在那里添加 tspan 或者其他什么?

javascript d3.js

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

nvd3图表 - xAxis标签

我们如何以锯齿形方式对齐长xAxis标签?(不要使用rotateLabels),或者是否有可能为nvd3图表中的那些长xAxis标签进行文本换行?

请查找附件图片以供参考......

实际图像 - 问题

在此输入图像描述

预期成果 - 1

在此输入图像描述

预期成果 - 2

在此输入图像描述

提前致谢...

svg d3.js nvd3.js

3
推荐指数
1
解决办法
7511
查看次数

堆积条形图标签 - D3

我正在尝试将数据标签添加到d3中的堆积条形图中.

我希望数据标签位于栏的中间.到目前为止,我只是想出了如何在每个栏顶部添加数据标签.但实际上我希望这些标签位于每个栏的中间.

这是我的代码:

var width = 750,
height = 500;

var x = d3.scale.ordinal()
        .rangeRoundBands([0, width], .1);

var y = d3.scale.linear()
        .rangeRound([height, 0]);

var color = d3.scale.ordinal()
            .range(["#D70B16", "#154CEF", "#1A8A55"]);

var xAxis = d3.svg.axis()
            .scale(x)
            .orient("bottom");

var yAxis = d3.svg.axis()
            .scale(y)
            .orienta("left")
            .tickFormat(d3.format(".2s"));

var tip = d3.tip()
        .attr('class', 'd3-tip')
        .offset([-10, 0])
        .html(function(d) {
        return "Value: " + (d.y1 - d.y0) + "";
        })

var svgContainer = d3.select("body")
                    .append("svg")
                    .attr("width", width)
                    .attr("height", height)
                    .append("g")
                    .attr("transform", "translate(" + 30 + "," …
Run Code Online (Sandbox Code Playgroud)

javascript css svg d3.js

2
推荐指数
1
解决办法
3842
查看次数

将文本从json分成几行,用于在D3强制布局中显示标签

我是d3.js的新手和编码.这是我的问题:

我试图找到一种方法来打破行中强制布局对象的长显示名称.

我希望能够确定在哪里打破这些行,我猜这是可以从json文件中完成的事情.

我知道已经有类似的问题已经提出,但我找不到放置代码的位置或为什么我以前的尝试没有成功.这是我的代码:

var width = 960,
    height = 800,
    root;

var force = d3.layout.force()
    .linkDistance(120)
    .charge(-600)
    .gravity(.06)
    .size([width, height])
    .on("tick", tick);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var link = svg.selectAll(".link"),
    node = svg.selectAll(".node");

d3.json("graph.json", function(error, json) {
  root = json;
  update();
});

function update() {
  var nodes = flatten(root),
      links = d3.layout.tree().links(nodes);


  // Restart the force layout.
  force
      .nodes(nodes)
      .links(links)
      .start();

  // Update links.
  link = link.data(links, function(d) { return d.target.id; });

  link.exit().remove();

  link.enter().insert("line", ".node") …
Run Code Online (Sandbox Code Playgroud)

javascript svg label d3.js force-layout

2
推荐指数
1
解决办法
2378
查看次数

标签 统计

d3.js ×4

svg ×4

javascript ×3

css ×1

force-layout ×1

label ×1

nvd3.js ×1

text ×1

word-wrap ×1

xml ×1