Question

我正在尝试创建一个说明特定差异的图表。为了简单起见，让我们说，我试图表明总体而言，五个迷人的人从水果中获得的卡路里比从所有蔬菜中加入的卡路里更多。因此，我想在相同的比例和x轴上绘制两个柱形图：一个显示水果的细分类型。第二个显示所有蔬菜的总和。

在How do I access the array sum here?和Can I move one data series down to a lower x axis, programmatically?的帮助下，我已经非常接近了。但是我很难搞清楚如何确保这两个图表完整可见。

我正在设置宽度和高度，然后转换SVG对象以使它们偏移：

  <?php

     $cusName = empty($model->PCODE) ? '' : Customer::findOne($model->PCODE)->PNAME;

    echo $form->field($model, 'PCODE')->widget(Select2::classname(), [
    'initValueText' => $cusName, // set the initial display text
    'options' => ['placeholder' => 'Search for a Customer ...',
                 ],
      'pluginOptions' => [
        'allowClear' => true,
        'minimumInputLength' => 3,
        'ajax' => [
            'url' => $url,
            'dataType' => 'json',
            'data' => new JsExpression('function(params) { return {q:params.term}; }')
        ],
        'escapeMarkup' => new JsExpression('function (markup) { return markup; }'),
        'templateResult' => new JsExpression('function(party) { return party.text; }'),
        'templateSelection' => new JsExpression('function (party) { return party.text; }'),
    ],
]);
         ?>

但是一些变化导致一些数据被切断。有没有办法阻止它被切断？可能在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)");中使用数学而不是任意数字？

https://jsfiddle.net/122cg3jq/4/

上的小提琴准备版

Answer 1

当您将图表并排翻译时，两个图表都不可见的原因。

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

所以而不是：

<META content="IE=5" http-equiv="X-UA-Compatible">

这样做，图形占宽度的2.5倍：

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

现在只需翻译两个组，使它们都处于同一高度。

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

工作代码here

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

1 个答案: