d3.js二重棒グラフでスケールを選択する方法は？

Question

私は、d3.jsでデュアルバスタットを作るためのスケールに問題があります。 2つの値の比較を行います。 年の年（Ytd）と年の前年（Ytdn1）！ 私は、グラフが2つのバーの間の比較を示すように両方の値に対して単一のスケールを作ることがそのトリックだと思います。

とのhierコード：

 var windowsize = $(window).width() - 150; 

      var margin = { top: 50, right: 60, bottom: 170, left: 60 }, 
      elementWidth = parseInt(windowsize, 10), 
      elementHeight = parseInt(d3.select(element).style("height"), 10), 
      width = elementWidth - margin.left - margin.right, 
      height = elementHeight - margin.top - margin.bottom; 

       // parsin the data from the data-view-model 
       var data = ko.unwrap(valueAccessor()); 

       data.forEach(function (d) { 
        if (d.Ytd == null) { 
         d.Ytd = 0; 
        } 
        if (d.Ytdn1 == null) { 
         d.Ytdn1 = 0; 
        }    
       }); 

       d3.select(element).select("svg").remove(); 
       if (!data || data.length === 0) return; 


        }) 

       var svg = d3.select(element).append("svg") 
       .attr("width", width + margin.left + margin.right) 
       .attr("height", height + margin.top + margin.bottom) 
       .append("g") 
       .attr("class", "graph") 
       .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
       var x = d3.scale.ordinal().rangeRoundBands([0, width], .1); 

//*********************** HOW to choose the right Scale ?? ************************************ 

       var y0 = d3.scale.linear().domain([0, d3.max(d3.values(data.Ytdn))]).range([height, 0]); 
       var y1 = d3.scale.linear().domain([0, d3.max(d3.values(data.Ytdn1))]).range([height, 0]); 
//*********************** HOW to choose the right Scale ?? ************************************ 

       var xAxis = d3.svg.axis().scale(x).orient("bottom"); 

       // create left yAxis 
       var yAxisLeft = d3.svg.axis().scale(y0).ticks(5).orient("left"); 
       // create right yAxis 
       var yAxisRight = d3.svg.axis().scale(y0).ticks(5).orient("right"); 

       x.domain(data.map(function (d) { return d.Name; })); 
       y0.domain([0, d3.max(data, function (d) { return d.Ytd; })]); 
       y0.domain([0, d3.max(data, function (d) { return d.Ytdn1; })]); 

       svg.append("g") 
       .attr("class", "x axis") 
       .attr("transform", "translate(0," + height + ")") 
       .call(xAxis) 
       .selectAll("text") 
       .style("text-anchor", "end") 
       .attr("dx", "-.8em") 
       .attr("dy", ".15em") 
       .attr("transform", function (d) { 
        return "rotate(-65)" 
       }); 

    svg.append("g") 
     .attr("class", "y axis axisLeft") 
     .attr("transform", "translate(0,0)") 
     .call(yAxisLeft) 
     .append("text") 
     .attr("y", 6) 
     .attr("dy", "-2em") 
     .style("text-anchor", "end") 
     .style("text-anchor", "end") 
     .text("YTD €"); 

    svg.append("g") 
     .attr("class", "y axis axisRight") 
     .attr("transform", "translate(" + (width) + ",0)") 
     .call(yAxisRight) 
     .append("text") 
     .attr("y", 6) 
     .attr("dy", "-2em") 
     .attr("dx", "2em") 
     .style("text-anchor", "end") 
     .text("YTD N1 €"); 

     var bars = svg.selectAll(".bar").data(data).enter(); 

     bars.append("rect") 
     .attr("class", "bar1") 
     .attr("x", function (d) { return x(d.Name); }) 
     .attr("width", x.rangeBand()/2) 
     .attr("y", function (d) { return y0(d.Ytd); }) 
     .attr("height", function (d, i, j) { return height - y0(d.Ytd); }) 
     .on('mouseover', tip.show) 
     .on('mouseout', tip.hide); 

     bars.append("rect") 
     .attr("class", "bar2") 
     .attr("x", function (d) { return x(d.Name) + x.rangeBand()/2; }) 
     .attr("width", x.rangeBand()/2) 
     .attr("y", function (d) { return y1(d.Ytdn1); }) 
     .attr("height", function (d, i, j) { return height - y1(d.Ytdn1); }); 

Answer 1

あなたは左と右の軸にしたい場合は同じになるように（そのYtdnとYtdn1が等しい場合、2つのバーが同じ高さを持っているであろうと、このような）、2つのスケールを使用する必要はありません。最初に、すべてを1つのyスケールを使用するように切り替えてください。それをyとしましょう。

次に、YtdnとYtdn1の両方のデータセットの最大値を占めるyのドメインを計算する必要があります。これはそれを行う必要があります。

var y0 = d3.scale.linear() 
    .domain([0, d3.max(data, function(d) { 
    return Math.max(d.Ytdn, d.Ytdn1); 
    })]) 
    .range([height, 0]); 

それは各d.Ytdnとd.Ytdn1の最大をピックアップし、全体dataアレイ全体のそれらの値の最大値を検索します。