如何转换标签文字

时间:2014-09-11 07:20:54

标签: javascript svg d3.js label transition

我尝试转换图表标签并设法转换到新位置并更改填充但我无法使用新项目数据进行更新。这可能吗?

example on jsfiddle

var margin = { top: 50, right: 100, bottom: 100, left: 100 },
    width = 1000 - margin.left - margin.right,
    height = 450 - margin.top - margin.bottom,
    Items = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5",
             "Item 6", "Item 7", "Item 8",    "Item 9", "Item 10"],

svg = d3.select("#chart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


var Labels = svg.selectAll(".dLabel")
    .data(Items); // select the data points and set their data

gEnter = Labels.enter()
    .append("text")
    .text(function (d) { return d; })
    .attr("x", 0)
    .attr("y", function (d, i) { return i * 40; })
    .style("text-anchor", "end");

Labels.exit().remove();

Items = ["Item 9", "Item 10", "Item 8", "Item 7", "Item 6",
         "Item 5", "Item 4", "Item 3", "Item 2", "Item 1"];

Labels.transition().duration(1500).ease("exp-in-out")
    .attr("fill", "red")
    .attr("transform", function (d) { return "translate(" + 50 + "," + 0 + ")"; });

0 个答案:

没有答案