Question

我是d3.js的新手。

我创建了一个条形图＆amp;通过将tickSize附加到Y轴，在图表区域中添加水平线。但是这条线路正在过关。

    var yAxis = d3.svg.axis()
                .scale(y)
                .orient("left")
                .ticks(10)
                .tickSize(-width);

请查看附带的屏幕截图。黑色水平线应位于条形图下方。

请帮忙。

        /* Fetch data via ajax */
        var margin = { top: 20, right: 20, bottom: 100, left: 40 },
        width = this.props.chartWidth - margin.left - margin.right,
        height = this.props.chartHeight - margin.top - margin.bottom;

        var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);
        var y = d3.scale.linear().range([height, 0]);

        //Remove the svg object if created previously for Clear purpose
        
        $("#" + this.props.chartContainerId).show();
        //d3.select("svg").remove();
        var chart = d3.select("#" + this.props.chartContainerId)
                      .append("svg")  //append svg element inside #chart
                      .attr("width", width + (2 * margin.left) + margin.right)    //set width
                      .attr("height", height + margin.top + margin.bottom + 100) //set height
                      .style("padding-top", "5px");

        var xAxis = d3.svg.axis()
                    .scale(x)
                    .orient("bottom");

        var yAxis = d3.svg.axis()
                    .scale(y)
                    .orient("left")
                    .ticks(10)
                    .tickSize(-width);

        //d3.json("/Scripts/D3Graphs/graphData.js", function (error, data) {
        var data = this.state.chartData;
        //var data = JSON.parse(chatJsonData);
        var props = this.props;
        x.domain(data.map(function (d) { return d.Department; }));
        //x.domain(jQuery.map(data, function (d) { return d.Department; }));
        y.domain([0, d3.max(data, function (d) { return d.NumberOfRequest; })]);// + 1.1

        var bar = chart.selectAll("g")
                          .data(data)
                        .enter()
                          .append("g");
        //.attr("transform", function (d, i) {
        //    return "translate(" + x(d.Department) + ", 0)";
        //});

        //Add the BAR & Set the X,Y Positions
        var barWidth = width / data.length;
        bar.append("rect")
            .attr("y", function (d) {
                return y(d.NumberOfRequest);
            })
            .attr("x", function (d) { return x(d.Department) + margin.left; })
            //Set the Height of the BAR
            .attr("height", function (d) {
                return height - y(d.NumberOfRequest);
            })
            //Set the Width of the BAR
            .attr("width", x.rangeBand()); //set width base on range on ordinal data x.rangeBand()


        bar.append("text")
            .attr("dy", ".75em")
            .text(function (d) {
                return d.NumberOfRequest;
            })
            .style("font-family", "arial")
            .style("font-size", "12px")
            .style("font-weight", "bold")
            .style("fill", "#ffffff")
            .style("text-anchor", "middle")
            .attr("x", function (d, i) {
                return i * (width / data.length) + margin.left + (x.rangeBand() / 2);//
            })
           .attr("y", function (d) {
               return y(d.NumberOfRequest) + 15;//height - (d * 4) + 15;
           }); // Show the Total Number of Requests on the To pof the BAR

        //Create a Div to show the Tooltip on Mouse Hover
        var div = d3.select("body").append("div").attr("class", "chartToolTip");
        //On mouse hover of the BAR, show the Tooltip with Department Names and Number of Requests.
        var toolTipValueText = this.props.toolTipValueText;
        var toolTipText = this.props.toolTipText;
        bar
            .on("mousemove", function (d) {
                div.style("left", d3.event.pageX + 10 + "px");
                div.style("top", d3.event.pageY - 25 + "px");
                div.style("display", "inline-block");
                //div.html("Department: " + d.Department + "<br>" + "Number of Requests: " + (d.NumberOfRequest));
                div.html(toolTipText + d.Department + "<br>" + toolTipValueText + (d.NumberOfRequest));
            });

        //Hide the Tooltil on mouse out
        bar
            .on("mouseout", function (d) {
                div.style("display", "none");
            });

        //Add X-AXIS to the Chart
        chart.append("g")
            .attr("class", "x axis")
            //.attr("transform", "translate(0," + height + ")")
            .attr("transform", "translate(" + margin.left + "," + height + ")")
            .call(xAxis)
          .selectAll("text")
            .style("text-anchor", "end")
            .attr("dx", "-.8em")
            .attr("dy", "-.55em")
            .attr("transform", "rotate(-90)");

        //Add Y-AXIS to the Chart
        if (this.props.showYaxis == "yes") {
            chart.append("g")
                .attr("class", "y axis")
                .attr("transform", "translate(" + margin.left + ",0)")
                .call(yAxis)
        }
    }

提前致谢。

Answer 1

在SVG中，最后绘制的内容保持在顶部，就像真正的画家在画布中使用墨水一样。话虽如此，移动追加轴的代码：

if (this.props.showYaxis == "yes") {
    chart.append("g")
        .attr("class", "y axis")
        .attr("transform", "translate(" + margin.left + ",0)")
        .call(yAxis)
}

在之前的位置附加条形码的代码：

var bar = chart.selectAll("g")//change this "g"!
    .data(data)
    .enter()
    .append("g");

注意将selectAll("g")更改为其他内容，例如selectAll("foo")，否则您将选择最近添加的轴组。

如何在水平刻度上显示条形 - 在D3.js中

1 个答案: