Question

我正在尝试在凹坑js条形图中添加y轴（成本）的条形图值。值正在添加但在图表之外，因为我认为它无法找到x轴的正确比例。有什么建议吗？

这是jsfiddle：http://jsfiddle.net/Ra2xS/27/

    var dim = {"width":590,"height":450}; //chart container width
    var data = [{"date":"01-02-2010","cost":"11.415679194952766"},{"date":"01-03-2010","cost":"10.81875691467018"},{"date":"01-04-2010","cost":"12.710197879070897"}];


    function barplot(id,dim,data)
    {
        keys = Object.keys(data[0]);
        var xcord = keys[0];
        var ycord = keys[1];
        var svg = dimple.newSvg(id, dim.width, dim.height);

        var myChart = new dimple.chart(svg,data);
        myChart.setBounds(60, 30, 505, 305);        

        var x = myChart.addCategoryAxis("x", xcord);
        //var x = myChart.addTimeAxis("x", xcord, "%d-%m-%Y","%b %Y");
        x.addOrderRule(xcord);
        x.showGridlines = true;
        //x.timePeriod = d3.time.months;

        var y = myChart.addMeasureAxis("y", ycord);
        y.showGridlines = true;
        y.tickFormat = ',.1f';    

        var s = myChart.addSeries(null, dimple.plot.bar);
        var s1 = myChart.addSeries(null, dimple.plot.line);
        s1.lineWeight = 3;
        s1.lineMarkers = true;

        myChart.draw(1500);

            s.shapes.each(function(d) {

                // Get the shape as a d3 selection
                var shape = d3.select(this),

                // Get the height and width from the scales
                height = myChart.y + myChart.height - y._scale(d.height);
                width = x._scale(d.width); //I think here is the problem

                //alert(d.width);
                // Add a text label for the value
                svg.append("text")

                // Position in the centre of the shape (vertical position is
                // manually set due to cross-browser problems with baseline)
                .attr("x", parseFloat(shape.attr("x")) + width / 2 - 15)
                .attr("y", parseFloat(shape.attr("y")) - height / 2)

                // Centre align
                .style("text-anchor", "middle")
                .style("font-size", "10px")
                .style("font-family", "sans-serif")

                // Make it a little transparent to tone down the black
                .style("opacity", 0.7)

                // Format the number
                .text(d3.format(",.2f")(d.yValue));
            });     
    }

barplot("body",dim,data);

Answer 1

您可以直接从元素中获取x位置和条形宽度。通过将高度传递到比例可以得到的y位置 - 无需偏移。

.attr("x", parseFloat(shape.attr("x")) + parseFloat(shape.attr("width"))/2)
.attr("y", y._scale(d.height))

完整演示here。我在标签上添加了一个小的垂直偏移量，因此它们不会与圆圈/线条重叠。

图表外的条形图中的凹坑js值

1 个答案: