我有一个使用dimple.js的条形图。如果使用d3功能很长,我正在包装图例标签。因为我正在包装文本,所以它与其他传说重叠。所以我需要重新定位图例以避免文本重叠。
var yMax = 520; // overriding y axis
var popup;
var score=8000/100;
var svg = dimple.newSvg("#chartContainer", 300, 400);
var data = [{
"Brand":"Aaaaa aaaaaaaaaaaaa",
"Day":"Mon",
"SalesVolume":100 },
{
"Brand":"Bbbbbbbb bbbbbbbb",
"Day":"Mon",
"SalesVolume":200 },
{
"Brand":"Cccccccccccccccc c",
"Day":"Mon",
"SalesVolume":200 },
{
"Brand":"Ddddddddddd ddddddd",
"Day":"Mon",
"SalesVolume":200 },
{
"Brand":"Eeeeeeeeeee eeeee",
"Day":"Mon",
"SalesVolume":200 },
{
"Brand":"Fffffffffffff ffffffffffff",
"Day":"Mon",
"SalesVolume":200 }];
var myChart = new dimple.chart(svg, data);
myChart.setBounds(100, 10, 250, 250)
var x = myChart.addCategoryAxis("x", "Day");
var y = myChart.addMeasureAxis("y", "SalesVolume");
y.overrideMax = yMax;
y.addOrderRule("SalesVolume");
var s = myChart.addSeries("Brand", dimple.plot.bar);
s.barGap=0.8;
var lgnd = myChart.addLegend(80, 300, 300, 30, "left");
lgnd.horizontalPadding = 1000;
lgnd.verticalPadding = 10000;
myChart.draw();
//d3.selectAll("rect").on("mouseover", null);
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
x = text.attr("x"),
y = text.attr("y"),
dy = parseFloat(text.attr("dy")),
tspan = text.text(null).append("tspan").attr("x", x).attr("y", y-10).attr("dy", 1 + "em");
console.log(y);
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 = text.append("tspan").attr("x", x).attr("y", y+10).attr("dy", 1 + "em").text(word);
}
}
});
}
d3.selectAll(".legendText")
.call(wrap, 100);
http://jsfiddle.net/keshav_1007/qec4L4zh/2/这是我的小提琴
请让我知道如何实现这个目标?