d3.js barchartあまり好きではない

Question

私はd3.js（バージョン4.1）を使って簡単な棒グラフを作成しています。公式ドキュメントの例に従っています。これは私のjsfiddleです：

My current barchart

は、これは私のコードです：

HTML：

<div class="diagram-wrapper"> 
    <div class="barchart"> 
     <div class="header"> 
     <h2>High score</h2> 
     </div> 
     <div class="content"> 

     </div> 
    </div> 
</div> 

のJs：

var data = [{ 
points: 50, 
name: "gunnar" 
}, { 
points: 100, 
name: "herp" 
}, { 
points: 500, 
name: "Jacob" 
}]; 

var width = 420, 
barHeight = 20; 

var x = d3.scaleLinear() 
.range([0, width]); 

var chart = d3.select(".diagram-wrapper div.barchart div.content") 
.append('svg') 
.attr("width", width); 

x.domain([0, d3.max(data, function(d) { 
return d.points; 
})]); 

chart.attr("height", barHeight * data.length); 

var bar = chart.selectAll("g") 
.data(data) 
.enter().append("g") 
.attr("transform", function(d, i) { 
    return "translate(0," + i * barHeight + ")"; 
}); 

bar.append("rect") 
.attr("width", function(d) { 
    return x(d.points); 
}) 
.attr("height", barHeight - 1); 

bar.append("text") 
.attr("x", function(d) { 
    return x(d.points) - 3; 
}) 
.attr("y", barHeight/2) 
.attr("dy", ".35em") 
.text(function(d) { 
    return d.points; 
}); 

しかし、私は見つけることができる例はすべてがありますバージョン3から、または彼らはTSVのOGのSCVデータ形式を使用する...私が欲しいものは何かこのように、次のよう

Example of what I want

そこで、基本的に私の質問は以下のとおりです。

• はどのようにして、垂直の代わりに、横棒を回すのですか？

• バーの下の名前をx軸に追加するにはどうすればよいですか？

• y軸にいくつかの値を追加してポイントを関連付ける方法を教えてください。

すべての質問のために申し訳ありませんが、私は実際にドキュメントを調査しましたが、4.1

おかげ

Answer 1

での作業例やブログ記事の漏れがあるとき、私はかなりそれのまわりで私の頭をラップすることはできません

横棒グラフを縦棒グラフに「フリップ」する簡単な方法はありません。ほぼすべてのコードをほとんど変更する必要があります。ここでは、基本的な手順を示します（コードを変更するのではなく、新しいコードを作成することに注意してください）。

まず、データは同じです。次に、SVGを追加します。

var width = 400, height = 500; 

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

その後、私たちはスケールを定義します。 y軸は定量的でありながら、x軸は、今質的である：

var xScale = d3.scaleBand() 
    .domain(data.map(function(d){ return d.name})) 
    .range([100, width]) 
    .paddingInner(0.2) 
    .paddingOuter(0.2); 

var yScale = d3.scaleLinear() 
    .domain([0, d3.max(data, function(d){ return d.points})]) 
    .range([height - 40, 10]); 

そして、我々はデータをバインドする：データと

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

我々は長方形を追加有界。我々はx、y、widthとheightの計算方法がわかります：これはトリッキーな部分である、その後

bars.attr("x", function(d){ return xScale(d.name)}) 
    .attr("y", function(d){ return yScale(d.points)}) 
    .attr("width", xScale.bandwidth()) 
    .attr("height", function(d){ return (height - 40) - yScale(d.points)}) 
    .attr("fill", "steelblue"); 

とを、軸：https://jsfiddle.net/gerardofurtado/o1cer41s/

：

var xAxis = d3.axisBottom(xScale); 
var yAxis = d3.axisLeft(yScale); 

svg.append("g").attr("transform", `translate(0,${height-40})`) 
    .call(xAxis); 

svg.append("g").attr("transform", "translate(100,0)") 
    .call(yAxis); 

とフィドルは、コードの作業を示してい

PS：コードにはいくつかの魔法の数字があります。また、私はIEを使用する場合は動作しませんテンプレートリテラルを使用しています。