3

このグラフのバーの上に値を表示する方法はありますか? TSV から値を取得していますが、現在、バーの値をそれぞれのバーの上にラベルとして表示するのに苦労しています。

これは私がTSVとして持っているデータです: ここに画像の説明を入力

これは、グラフをレンダリングするために現在持っているものです。

margin =
top: 30
right: 30
bottom: 40
left: 60
width = 960 - margin.left - margin.right
height = 500 - margin.top - margin.bottom

formatPercent = d3.format("")

x = d3.scale.ordinal()
    .rangeRoundBands([width, 0], .1)

y = d3.scale.linear()
    .range([height, 0])

xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickFormat(formatPercent)

yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(formatPercent)

svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")

d3.tsv("/Home/GetTsv/data.tsv", (error, data)->

    data.forEach((d)->
        d.Total = +d.Total
    )

    x.domain(data.map((d)-> d.Year))
    y.domain([0, d3.max(data, (d)-> d.Total)])

    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis)
        .append("text")
        .attr("y", 30)
        .attr("x", width / 2)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .text("Year")

    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
        .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", -60)
        .attr("x", -(height / 2))
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .text("Total Activity")

    svg.selectAll(".bar")
        .data(data)
        .enter().append("rect")
        .attr("class", "bar")
        .attr("x", (d)-> x(d.Year))
        .attr("width", x.rangeBand())
        .attr("y", (d)-> y(d.Total))
        .attr("height", (d)-> height - y(d.Total))

#   svg.selectAll("text")
#       .data(data)
#       .enter()
#       .append("text")
#       .text((d)-> d.Total)
#       .attr("x", (d, i)-> i * (width / data.length))
#       .attr("y", (d)-> height - d)

)

これは私のグラフがどのように見えるかです：

ここに画像の説明を入力

しかし、次のようにバーの上にラベルを付けたいと思います:

ここに画像の説明を入力

コメントアウトされたコードは、バーの上に値ラベルを表示しようとする私の試みです。

4

1 に答える 1

4

このコードをテキスト セクションに貼り付けると、うまくいくはずです。

.attr("text-anchor", "middle")
.attr("x", function(d, i) { return i * (width / dataset.length) + (width / dataset.length) / 2; })
.attr("y", function(d) { return height - (d * 10) - 10; })

-10 は、バーからある程度の距離を作ります。この場合、明らかに 10px です。また、他の数値も少し調整する必要があります。ファイルからコードを貼り付けただけなので、試すデータセットがないため、コードでどのように見えるか正確にはわかりません。うまくいかない場合は、スクリプトをhttp://jsfiddle.net/に貼り付けてください。それがどのように機能するか教えてください！

于 2013-03-12T19:56:33.267 に答える