我希望以以下jsfiddle中的方式缩放节点。
http://jsfiddle.net/HF57g/2/
jsfiddle源代码： 如何在不缩放与时间轴绑定的其他形状的情况下缩放d3.time.scale
借助于这个jsfiddle，我能够使用SVG圆形应用缩放。
注意：下面的代码显示，使用SVG圆形可以提供x和y轴属性。
我希望你可以在使用此缩放功能时，同时拥有圆和菱形。
因此，我选择了D3的“d3.svg.symbol”，以允许使用圆和菱形。
然而，我面临的问题是，通过使用D3的SVG符号，我无法专门操纵x轴，因为它只允许平移。
下面的代码来自fiddle，展示了对缩放x轴的操作。如果可能的话，我也想用translate做同样的事情。
下面的代码展示了如何使用SVG圆形并展示了我认为最合理的缩放方式。但不幸的是，它并没有起作用。
这里有一个添加了钻石和圆圈的 fiddle。 https://jsfiddle.net/g67cgt4w/
注意：下面的代码显示，使用SVG圆形可以提供x和y轴属性。
.enter().append("circle")
.attr("cx", function(d) { return xScale(d); })
.attr("cy", function(d) { return yScale(d); })
我希望你可以在使用此缩放功能时，同时拥有圆和菱形。
因此，我选择了D3的“d3.svg.symbol”，以允许使用圆和菱形。
然而，我面临的问题是，通过使用D3的SVG符号，我无法专门操纵x轴，因为它只允许平移。
.enter().append("path")
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")"; })
.attr("d", d3.svg.symbol()
.size(145)
.type(function(d) {
if(d.value <= 10)
return "diamond";
else
return "circle";
}));
下面的代码来自fiddle，展示了对缩放x轴的操作。如果可能的话，我也想用translate做同样的事情。
return svg.selectAll("rect.item")
.attr("x", function(d){return scale(d);})
下面的代码展示了如何使用SVG圆形并展示了我认为最合理的缩放方式。但不幸的是，它并没有起作用。
var zoom = d3.behavior.zoom()
.on("zoom", function(){
//If I use SVG Circles the following code works.
//chart.selectAll(".item").attr("cx", function(d){ return xScale(d); });
//By using SVG Symbols and translate, this does not work
chart.selectAll(".item").attr("transform", function(d) { return "translate("+ d.x +", 0)";});
}).x(xScale);
这里有一个添加了钻石和圆圈的 fiddle。 https://jsfiddle.net/g67cgt4w/
scale(" + d3.event.scale+", 1)。将其更改为scale(" + d3.event.scale + "," + d3.event.scale + ")而不是“1”（即y轴没有变化），这样做是否能实现你想要的效果？（也许我误解了问题...毕竟我看到的是方块而不是菱形）。 - Max Starkenburg