Javascript 如何在图形栏上方显示值标签?

Javascript 如何在图形栏上方显示值标签?,javascript,d3.js,Javascript,D3.js,有没有一种方法可以显示此图中条形图上方的值?我有从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("")

有没有一种方法可以显示此图中条形图上方的值?我有从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)

)
这就是我的图表的样子:

但我希望在横条上方有类似的标签:


注释掉的代码是我试图使值标签显示在条形图上方的代码。

将此代码粘贴到文本部分应该可以达到以下目的:

.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。另外,其他数字也需要调整一点,我只是粘贴了一个文件中的代码,所以我不知道它在您的代码中会是什么样子,因为我没有数据集可以尝试。 如果不行的话,你能把脚本粘贴进去,这样我就可以试着把它写出来吗?让我知道结果如何

“.attr”((y),(d)->height-d)”是否返回值,或者是否需要将第二个d更改为y(d.total)