D3.jsバーチャート

Question

HTML

<div id="searchVolume"></div> 

CSS

#tooltip { 
    position: absolute; 
    width: 50px; 
    height: auto; 
    padding: 10px; 
    background-color: white; 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
    -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); 
    -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); 
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); 
    pointer-events: none; 
} 
#tooltip.hidden { 
    display: none; 
} 
#tooltip p { 
    margin: 0; 
    font-family: sans-serif; 
    font-size: 12px; 
    line-height: 16px; 
} 
.indent{ 
    padding-left: 5px; 
} 

rect { 
    -moz-transition: all 0.3s; 
    -webkit-transition: all 0.3s; 
    -o-transition: all 0.3s; 
    transition: all 0.3s; 
} 
rect:hover{ 
    fill: orange; 
} 
.axis path, 
.axis line { 
    fill: none; 
    stroke: black; 
    shape-rendering: crispEdges; 
} 
.axis text { 
    font-family: sans-serif; 
    font-size: 11px; 
} 

スクリプト

var margin = {top: 25, right: 40, bottom: 35, left: 85}, 
       w = 500 - margin.left - margin.right, 
       h = 350 - margin.top - margin.bottom; 
var padding = 10; 

var colors = [ ["Morning", "#F64BEE"], 
        ["Midday", "#25B244"], 
      ["Afternoon", "#2BA3F4"], 
      ["Evening","#FD7680"]]; 

var dataset = [ 
       { "Morning": 1400000, "Midday": 673000, "Afternoon": 43000, "Evening":50000}, 
       { "Morning": 165000, "Midday": 160000, "Afternoon": 21000, "Evening":23000 }, 
       {"Morning": 550000, "Midday": 301000, "Afternoon": 34000, "Evening":43000}, 
     {"Morning": 550320, "Midday": 351000, "Afternoon": 24000, "Evening":38000}, 
     {"Morning": 55000, "Midday": 3010, "Afternoon": 24000, "Evening":43054}, 
     {"Morning": 750000, "Midday": 401000, "Afternoon": 84000, "Evening":42100}, 
     {"Morning": 578000, "Midday": 306000, "Afternoon": 54000, "Evening":43400}, 
          ]; 

var xScale = d3.scale.ordinal() 
       .domain(d3.range(dataset.length)) 
       .rangeRoundBands([0, w], 0.05); 
// ternary operator to determine if global or local has a larger scale 
var yScale = d3.scale.linear() 
       .domain([0, d3.max(dataset, function(d) { return Math.max(d.Morning,d.Midday,d.Afternoon,d.Evening);})]) 
       .range([h, 0]); 
var xAxis = d3.svg.axis() 
       .scale(xScale) 
       .orient("bottom"); 
var yAxis = d3.svg.axis() 
       .scale(yScale) 
       .orient("left") 
       .ticks(5); 




var commaFormat = d3.format(','); 

//SVG element 
var svg = d3.select("#searchVolume") 
      .append("svg") 
      .attr("width", w + margin.left + margin.right) 
      .attr("height", h + margin.top + margin.bottom) 
      .append("g") 
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

// Graph Bars 
var sets = svg.selectAll(".set") 
    .data(dataset) 
    .enter() 
    .append("g") 
    .attr("class","set") 
    .attr("transform",function(d,i){ 
     return "translate(" + xScale(i) + ",0)"; 
    }) 
    ; 

sets.append("rect") 
    .attr("class","Morning") 
    .attr("width", xScale.rangeBand()/4) 
    .attr("y", function(d) { 
     return yScale(d.Morning); 
    }) 
    .attr("x", xScale.rangeBand()/4) 
    .attr("height", function(d){ 
     return h - yScale(d.Morning); 
    }) 
    .attr("fill", colors[0][1]) 
    .append("text") 
    .text(function(d) { 
     return commaFormat(d.Morning); 
    }) 
    .attr("text-anchor", "middle") 
    .attr("x", function(d, i) { 
     return xScale(i) + xScale.rangeBand()/4; 
    }) 
    .attr("y", function(d) { 
     return h - yScale(d.Morning) + 14; 
    }) 
    .attr("font-family", "sans-serif") 
    .attr("font-size", "11px") 
    .attr("fill", "black") 
    ; 

sets.append("rect") 
    .attr("class","Midday") 
    .attr("width", xScale.rangeBand()/4) 
    .attr("y", function(d) { 
     return yScale(d.Midday); 
    }) 
    .attr("height", function(d){ 
     return h - yScale(d.Midday); 
    }) 
    .attr("fill", colors[1][1]) 
    .append("text") 
    .text(function(d) { 
     return commaFormat(d.Midday); 
    }) 
    .attr("text-anchor", "middle") 
    .attr("x", function(d, i) { 
     return xScale(i) + xScale.rangeBand()/4; 
    }) 
    .attr("y", function(d) { 
     return h - yScale(d.Midday) + 14; 
    }) 
    .attr("font-family", "sans-serif") 
    .attr("font-size", "11px") 
    .attr("fill", "red") 
    ; 

    sets.append("rect") 
    .attr("class","Afternoon") 
    .attr("width", xScale.rangeBand()/4) 
    .attr("y", function(d) { 
     return yScale(d.Afternoon); 
    }) 
    .attr("height", function(d){ 
     return h - yScale(d.Afternoon); 
    }) 
    .attr("fill", colors[2][1]) 
    .append("text") 
    .text(function(d) { 
     return commaFormat(d.Afternoon); 
    }) 
    .attr("text-anchor", "middle") 
    .attr("x", function(d, i) { 
     return xScale(i) + xScale.rangeBand()/4; 
    }) 
    .attr("y", function(d) { 
     return h - yScale(d.Afternoon) + 14; 
    }) 
    .attr("font-family", "sans-serif") 
    .attr("font-size", "11px") 
    .attr("fill", "red") 
    ; 

    sets.append("rect") 
    .attr("class","Evening") 
    .attr("width", xScale.rangeBand()/4) 
    .attr("y", function(d) { 
     return yScale(d.Evening); 
    }) 
    .attr("height", function(d){ 
     return h - yScale(d.Evening); 
    }) 
    .attr("fill", colors[3][1]) 
    .append("text") 
    .text(function(d) { 
     return commaFormat(d.Evening); 
    }) 
    .attr("text-anchor", "middle") 
    .attr("x", function(d, i) { 
     return xScale(i) + xScale.rangeBand()/4; 
    }) 
    .attr("y", function(d) { 
     return h - yScale(d.Evening) + 14; 
    }) 
    .attr("font-family", "sans-serif") 
    .attr("font-size", "11px") 
    .attr("fill", "red") 
    ; 
// xAxis 
svg.append("g") // Add the X Axis 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + (h) + ")") 
    .call(xAxis) 
     ; 
// yAxis 
svg.append("g") 
    .attr("class", "y axis") 
    .attr("transform", "translate(0 ,0)") 
    .call(yAxis) 
    ; 
// xAxis label 
svg.append("text") 
    .attr("transform", "translate(" + (w/4) + " ," + (h + margin.bottom - 5) +")") 
    .style("text-anchor", "middle") 
    .text("Keyword"); 
//yAxis label 
svg.append("text") 
     .attr("transform", "rotate(-90)") 
     .attr("y", 0 - margin.left) 
     .attr("x", 0 - (h/4)) 
     .attr("dy", "1em") 
     .style("text-anchor", "middle") 
     .text("Searches"); 

// Title 
svg.append("text") 
     .attr("x", (w/2)) 
     .attr("y", 0 - (margin.top/2)) 
     .attr("text-anchor", "middle") 
     .style("font-size", "16px") 
     .style("text-decoration", "underline") 
     .text("Weekly Consumption"); 


// add legend 
var legend = svg.append("g") 
     .attr("class", "legend") 
     //.attr("x", w - 65) 
     //.attr("y", 50) 
     .attr("height", 100) 
     .attr("width", 100) 
     .attr('transform', 'translate(-20,50)'); 

var legendRect = legend.selectAll('rect').data(colors); 

legendRect.enter() 
    .append("rect") 
    .attr("x", w - 65) 
    .attr("width", 10) 
    .attr("height", 10); 

legendRect 
    .attr("y", function(d, i) { 
     return i * 20; 
    }) 
    .style("fill", function(d) { 
     return d[1]; 
    }); 

var legendText = legend.selectAll('text').data(colors); 

legendText.enter() 
    .append("text") 
    .attr("x", w - 52); 

legendText 
    .attr("y", function(d, i) { 
     return i * 20 + 9; 
    }) 
    .text(function(d) { 
     return d[0]; 
    }); 

D3 Fiddle

上記のフィドルで、私はd3.jsライブラリを使用して棒グラフを作成しようとしました。私は多くの時間を取るべきではない基本的なことに従っている。私はd3の機能を理解することができません。あなたはフィドルで遊ぶことができ、どんな助けも大きな助けになるでしょう：
1.私は単一のx値にグループ化された4つの異なるバーが必要です。 '0'の場合と同様に、現在のものとは異なり、4つのものがあり、すべてを2つにマージします。
2. x軸の内容を月曜日から金曜日のような日に変更します。
3. y軸の場合、20000の代わりに20kと表示されるような値を表示しようとしていますが、バーは動的に作成中にそれを認識する必要があります。これは可能ですか？

どのようなヘルプも非常に有益です。私はそれを理解できませんでした。

Answer 1

主な問題は、データを正しく結合することですが、後でdata関数を使用してデータを子要素に結合することで解決できるいくつかの手作業を始めることです。まず、私たちは2つのx軸スケールを必要とします.1つは私たちの日のドメインを保持し、もう1つはrangeRoundBandsという日のスケールを使って時間ドメインを保持します。

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

var time_scale = d3.scale.ordinal(); 

time_scale.domain(['Morning', 'Midday', 'Afternoon', 'Evening']) 
    .rangeRoundBands([0, day_scale.rangeBand()]); 

スケールを設定している間にx軸の書式設定に取り掛かりましょう。私は日の配列を作成し、tickFormat関数内で渡されたデータのインデックスに基づいて配列の値を返すことができます。

var days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']; 
var day_axis = d3.svg.axis() 
    .scale(day_scale) 
    .orient("bottom") 
    .tickFormat(function(d,i) { 
    return days[i]; 
    }); 

今y軸の書式、我々はhere

var prefix = d3.formatPrefix(1.21e9); 
var searches_axis = d3.svg.axis() 
    .scale(searches_scale) 
    .orient("left") 
    .ticks(5) 
    .tickFormat(function(d) { 
     var prefix = d3.formatPrefix(d); 
     return prefix.scale(d) + prefix.symbol; 
    }); 

d3.formatPrefixの詳細情報を使用することによってこの問題を解決することができます今すぐデータを取得するために、私たちのSVGと軸の設定をスキップすることができますが、問題への参加：

var day_groups = svg.selectAll(".day-group") 
    .data(dataset) // join data to our selection 
    .enter().append("g") 
    .attr("class", function(d, i) { 
    return 'day-group day-group-' + i; 
    }) 
    .attr("transform", function(d, i) { 
    // position a g element with our day_scale and data index 
    return "translate(" + day_scale(i) + ",0)"; 
    }); 

私たちの日グループを正しく配置することで、私たちは時間データを追加することができます。

var times_g = day_groups.selectAll(".time-group") 
    .data(function(d) { 
    // this is the tricky part, we are creating an array of 
    // objects with key (time...'Morning', 'Midday', 'Afternoon', 'Evening') 
    // and value (the value of the time) 
    // in order to create a time group for each time event 
    return Object.keys(d).map(function(key) { 
     return { 
     key: key, 
     value: d[key] 
     } 
    }); 
    }) 
    .enter().append("g") 
    .attr("class", function(d) { 
    return 'time-group time-group-' + d.key; 
    }) 
    .attr("transform", function(d) { 
    // use our time scale to position 
    return "translate(" + time_scale(d.key) + ",0)"; 
    }); 

ここでrectを追加できます。

var rects = times_g.selectAll('.rect') 
    .data(function(d) { 
    // use as data our object 
    return [d]; 
    }) 
    .enter().append("rect") 
    .attr("class", "rect") 
    .attr("width", time_scale.rangeBand()) // get width of rect based in our time_scale 
    .attr("x", function(d) { 
    return 0; // returning 0 since the group is in charge of positioning 
    }) 
    .attr("y", function(d) { 
    return searches_scale(d.value); // use our y_scale 
    }) 
    .attr("height", function(d) { 
    return h - searches_scale(d.value); // use our y_scale 
    }) 
    .style("fill", function(d) { 
    return colors[d.key]; // map colors by using an object 
    }); 

マッピングカラーオブジェクト：あなたは、これは、ここでどのように動作するかのいずれかの疑問を持っている場合は

var colors = { 
    "Morning":"#F64BEE", 
    "Midday": "#25B244", 
    "Afternoon": "#2BA3F4", 
    "Evening": "#FD7680" 
}; 

が更新jsfiddleです：https://jsfiddle.net/706gsjfg/3/（私は特定のものを削除していますが、私は推測後で追加することができます）