Question

选择“名称”，然后选择附加小提琴http://jsfiddle.net/sjp700/HVkyL/的“焦点”设置。由于某种原因，矩形不会随宽度变化而调整大小。有任何想法吗？我正在使用一个用于rect和text的组：

gEnter = group.enter()
         .append("g")
         .attr("class", "grow")
         .style("fill", "blue")
          .attr("transform", function (d) { return "translate(" + xRange(d.start) + "," +     yRange(d[axes.yAxis]) + ")"; });

Answer 1

svg:g组下的元素的输入/更新/退出模式似乎是过去两天的明星。例如，请参阅here，获取Lars的类似答案，我在答案下面的评论（以及关于该主题的博客文章的链接）。我相信这是你在重绘函数中想要的模式：

...
gEnter.append("rect")
    .attr("class", "rectband");

group.selectAll(".rectband")
    .attr("width", function (d) {return xRange(d.width)})
    .attr("height", 18)
    .style("fill", "blue")
    .style("opacity", .5) // set the element opacity
    .style("stroke", "black"); // set the line colour;

gEnter.append("text")
    .attr("class", "textband");

group.selectAll(".textband")
    .style("fill", "black")
    .text(function (d) {return (d.name);})
    .attr("transform", function (d) {
        return "translate(" + (2) + "," + (13) + ")";
    });
...

请注意，您使用相同的CSS类来处理矩形和文本。

以下是更新后的FIDDLE。

矩形未按比例/宽度变化正确调整大小

1 个答案: