棒グラフの<rect>の両端にラベルを追加する

Question

D3を使用してデータを横棒グラフとして表示しています。値は、通常、8つの異なるスケールで-10から+10の範囲です。私が望むようにバーをレンダリングしていますが、軸のextreemsごとにlablesを追加する方法はありません。

は、これまで私が持っている：

が、私のような何かを達成したい：つまり

各スケールの各極度のラベルを。 私は、バーにデータラベル（例えば値）を追加する例がたくさんありましたが、コンテナの極端にレンダリングされる文字列の配置を強制する方法がいくつかあります。

現在、私は配列からデータをレンダリングしています。ラベルは2つの配列に格納されています。

var data = [10, 5, -5, -10, 2, -2, 8, -8]; 
var leftLabels = ["label 1","label 2", ...]; 
var rightLabels = ["label 1", "label 2", ...]; 

ほとんどのアイデアや例へのリンクが大歓迎です。

Answer 1

私はd3.jsの専門家ではありませんが、簡単にこれを行うことができます。それについては別の方法があります。あなたのユースケースのためにpenを作成しました。

以下のコードの重要な部分を貼り付けます。あなたのチャートでは、あなたのニーズに合った調整が必要です。あなたが安定していると感じるまで、値を使って遊んでみてください。

// Your array containing labels for left and right values 

var leftSideData = ["left1", "left2", "left3", "left4", "left5", "left6", "left7", "left8"]; 

var rightSideData = ["right1", "right2", "right3", "right4", "right5", "right6", "right7", "right8"]; 

var left = svg.selectAll(".leftData") 
    .data(leftSideData) 
    .enter().append("g") 
    .attr("class", "leftVal") 
    .attr("transform", function(d, i) { 
     return "translate(0," + i * 57 + ")"; 
    }); 

    left.append("text") 
    .attr("x", 0) 
    .attr("y", 9) 
    .attr("dy", ".35em") 
    .style("text-anchor", "end") 
    .text(function(d) { 
     return d; 
    }); 

    var right = svg.selectAll(".rightData") 
    .data(rightSideData) 
    .enter().append("g") 
    .attr("class", "rightVal") 
    .attr("transform", function(d, i) { 
     return "translate(0," + i * 57 + ")"; 
    }); 

    right.append("text") 
    .attr("x", width + 30) 
    .attr("y", 9) 
    .attr("dy", ".35em") 
    .style("text-anchor", "end") 
    .text(function(d) { 
     return d; 
    }); 

私はこれが完璧だとは言わないが、それにアプローチする方法についてのアイデアを得ることを願っています。ではごきげんよう！！

Answer 2

SEのqを尋ねるだけで、私は問題を再調整するのに役立ちます。それからしばらくしてから新しい試みが結果をもたらします。それ以外の人は誰ですか？

私は、SVGの作成方法を変更することでその機能を有効にすることができました。だから私は今、以下の構造を有する：

<SVG> 
><g> (one for each bar) 
>><text> 
>><rect> 
>><text> 
><other stuff like axies> 

それは<text>要素が<rect>要素（まあ、彼らは、追加することができますが、それらは表示されません）に追加することができないことが判明します。

コードは次のとおりです。

var data = [10,2,4,-10,...etc...]; 

var leftLabels = ["left 1","left 1", ...etc...]; 

var rightLabels = ["right 1","right 2", ...etc...]; 

//chart dimentions 
var margin = { top: 20, right: 30, bottom: 40, left: 30 }, 
    width = 600 - margin.left - margin.right, 
    barHeight = 30, 
    height = barHeight * data.length; 

//chart bar scaling 
var x = d3.scale.linear() 
.range([100, width-100]); 

var y = d3.scale.ordinal() 
.rangeRoundBands([0, height], 0.1); 

var chart = d3.select(".chartsvg") 
.attr("width", width + margin.left + margin.right) 
.attr("height", barHeight * data.length + margin.top + margin.bottom) 
.append("g") 
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

x.domain([d3.min(data), d3.max(data)]); 

//append a g for each data item 
var bar = chart.selectAll(".bar") 
    .data(data) 
    .enter() 
    .append("g"); 

//in each bar add a rect for the bar chart bar 
bar.append("rect") 
    .attr("class", function (d) { return "bar--" + (d < 0 ? "negative" : "positive"); }) 
    .attr("x", function (d) { return x(Math.min(0, d)); }) 
    .attr("y", function (d, i) { return i* barHeight; }) 
    .attr("width", function (d) { return Math.abs(x(d) - x(0)); }) 
    .attr("height", barHeight-1); 

//append the labels to each g using the label data 
bar.append("text") 
    .data(rightLabels) 
    .attr("x", width) 
    .attr("y", function (d, i) { return (i * barHeight)+barHeight/2; }) 
    .attr("dy", ".5em") 
    .attr("fill","steelblue") 
    .attr("text-anchor","end") 
    .text(function (d) { return d; }); 

bar.append("text") 
    .data(leftLabels) 
    .attr("x", 0) 
    .attr("y", function (d, i) { return (i * barHeight) + barHeight/2; }) 
    .attr("dy", ".5em") 
    .attr("fill","darkorange") 
    .attr("text-anchor", "start") 
    .text(function (d) { return d; }); 
//then append axis etc... 

フォーマット：何か他に注意すること。ラベルのテキストに色を付けるには、「ストローク」属性と「塗りつぶし」属性を使用する必要があります。これらは、テキストのHTML「カラー」属性とほぼ同じです。