如何在d3.js雙條形圖中選擇比例尺？

Question

我有一個尺度問題，選擇用d3.js製作雙條形圖。 任務是在兩個值之間進行比較： 到目前爲止的年份（Ytd）和去年的到目前爲止的年份（Ytdn1）！ 我認爲訣竅在於爲這兩個值製作一個單一比例，以便圖表顯示兩個欄之間的比較。

和票數是代碼：

 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

如果你想左，右軸是相同的（使得2條也有同樣的高度，如果他們Ytdn和Ytdn1相等）那麼就不需要使用2個刻度。所以首先，將所有東西都切換到一個單一的比例尺。我們稱之爲y。

然後，您需要計算一個域y，該域涵蓋了兩個數據集Ytdn和Ytdn1之間的最大值。這應做到：

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陣列這些值是最大。