Javascript 如何将这两个图表放在一个SVG上

我试图创建一个图表来说明一个特殊的差异。为了简单起见，我想说的是，总的来说，五个迷人的人从水果中摄取的热量远远超过所有蔬菜的总和。所以我想在相同的比例和x轴上画两个柱状图：一个显示水果的分类，按品种。还有一秒显示所有蔬菜的总和

在我的帮助下，我已经非常接近了。但我很难弄清楚如何确保两张图表都是完整可见的

我正在设置宽度和高度，然后变换SVG对象，使其偏移：

var w = 400,
    h = 600;

var svg = d3.select("#chart")
  .append("svg")
  .attr("width", w)
  .attr("height", h)

var svgcarrot = svg.append("g").attr("transform", "translate(0,100)")
var svgfruit = svg.append("g").attr("transform", "translate(0,-150)");  

但是一些变化会导致一些数据被切断。有没有办法防止它被切断？在

attr（“transform”，“translate（0，-150）”）

中可能使用数学而不是任意数字

---

小提琴版本在

当你并排翻译时，两张图表都不可见的原因

因为对于这两个图表，您提供的范围从0到svg的宽度。 现在，由于两个图表具有相同的比例，因此它们将采用全宽

因此，不是：

xScale = d3.scale.ordinal()
    .domain(d3.range(dataset[0].length))
    .rangeRoundBands([0, w], 0.05);

执行此操作时，图形的宽度为2.5：

  xScale = d3.scale.ordinal()
    .domain(d3.range(dataset[0].length))
    .rangeRoundBands([0, w/2.5], 0.05);

现在简单地翻译这两组，使他们都在同一高度上

var svgcarrot = svg.append("g").attr("transform", "translate(500,0)")//y is 0 so that both are drawn @ same height
var svg = svg.append("g").attr("transform", "translate(0,0)");//y is 0 so that both are drawn @ same height

---

工作代码

不是一个答案，只是一个注释：您正在使用

var svg

两次。把第二个换成别的。@Gerardofutado完成。新提琴有

svgcarrot

和

svgfruit