我想<text>在SVG中显示一个自动换行到容器<rect>的内容,就像HTML文本填充<div>元素一样.有办法吗?我不想使用<tspan>s 来定位线条.
我想编写一个函数,返回带有两行文本的刻度标签。正如我所看到的,svg 文本标签用于文本标签。有没有办法在那里添加 tspan 或者其他什么?
我们如何以锯齿形方式对齐长xAxis标签?(不要使用rotateLabels),或者是否有可能为nvd3图表中的那些长xAxis标签进行文本换行?
请查找附件图片以供参考......
实际图像 - 问题

预期成果 - 1

预期成果 - 2

提前致谢...
我正在尝试将数据标签添加到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) 我是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) d3.js ×4
svg ×4
javascript ×3
css ×1
force-layout ×1
label ×1
nvd3.js ×1
text ×1
word-wrap ×1
xml ×1