web-dev-qa-db-ja.com

D3.jsで順序スケールを使用してテキストラベル付きx軸を作成する

D3.jsで、順序x軸を使用して棒グラフを作成しています。この棒グラフの目盛りは、グラフにテキストのラベルを付ける必要があります。順序スケールがxティックを対応するバーの位置にどのように「マッピング」するかを誰かが説明できますか？具体的には、棒グラフの対応する棒にテキスト値の配列を使用してxティックラベルを指定する場合。

現在、ドメインを次のように設定しています：

    var labels = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t"];
    var xScale = d3.scale.ordinal()
                .domain(labels)

ただし、テキストラベルの後に1〜19の値が表示されています。

このフィドルに見られるように：

http://jsfiddle.net/chartguy/FbqjD/

関連Fiddleソースコード：

//Width and height
            var margin = {top: 20, right: 20, bottom: 30, left: 40};           
            var width = 600 - margin.left - margin.right;
            var height= 500-margin.top -margin.bottom;
            var w = width;
            var h = height;


            var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
                            11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];

            var labels = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t"];
            var xScale = d3.scale.ordinal()
            .domain(labels)
                            .rangeRoundBands([margin.left, width], 0.05);
            var xAxis = d3.svg.axis().scale(xScale).orient("bottom");


            var yScale = d3.scale.linear()
                            .domain([0, d3.max(dataset)])
                            .range([h,0]);


            //Create SVG element
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);

            //Create bars
            svg.selectAll("rect")
               .data(dataset)
               .enter()
               .append("rect")
               .attr("x", function(d, i) {
                    return xScale(i);
               })
               .attr("y", function(d) {
                    return yScale(d);
               })
               .attr("width", xScale.rangeBand())
               .attr("height", function(d) {
                    return h - yScale(d);
               })
               .attr("fill", function(d) {
                    return "rgb(0, 0, 0)";
               });

            svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + 0 + ")")
      .call(xAxis);

            //Create labels
            svg.selectAll("text")
               .data(dataset)
               .enter()
               .append("text")
               .text(function(d) {
                    return d;
               })
               .attr("x", function(d, i) {
                    return xScale(i) + xScale.rangeBand() / 2;
               })
               .attr("y", function(d) {
                    return h - yScale(d) + 14;
               });
javascriptd3.jsdata-visualization
9
arete

d3.svg.axis().tickValues(*array*)を使用して、順序軸の目盛り値を明示的に設定できます。

ただし、これはキーと値を危険なほど分離するため、奇妙な方法です。つまり、手動でスケールを調整し、データが正しく対応していることを確認する必要があります。キーと値を1つのオブジェクトにグループ化してから、次の形式を使用すると便利です。

       axis.domain(array.map(function (d) { return d.value; }))

軸ドメインをマッピングします。

私はあなたのデータを作り直し、私がもっと見ているものでそれをするようにいじりました d3 way 。 （また、楽しみのために他のいくつかの変更を加えたことにも注意してください。つまり、マージンを改善し、軸の配置をクリーンアップしました。）

15
nsonnad