Question

我正在尝试使用以下脚本在x轴（图表中的条形图的底部）绘制一条线，但它在顶部绘制。在底部添加线条的正确方法是什么？请帮我解决一下。

//"ONE" IS IGNORED, SPAN ADDED ON THE NEXT 2 WORDS
$string="One example text bla bla bla";
$output="One example text <span>bla bla bla</spa>";

//String added after the second word
$string="Another example text bla bla bla";
$output="Another example <span>text bla bla bla</spa>";

该行的脚本;

var datasetBarChart = ${barList};


// set initial group value
var group = "All";

function datasetBarChosen(group) {
    var ds = [];
    for (x in datasetBarChart) {
        if (datasetBarChart[x].group == group) {
            ds.push(datasetBarChart[x]);
        }
    }
    return ds;
}


function dsBarChartBasics() {

    var margin = {top: 30, right: 5, bottom: 20, left: 50},
    width = 1000 - margin.left - margin.right,
            height = 450 - margin.top - margin.bottom,
            colorBar = d3.scale.category20(),
            barPadding = 1
            ;

    return {
        margin: margin,
        width: width,
        height: height,
        colorBar: colorBar,
        barPadding: barPadding
    }
    ;
}

function dsBarChart() {

    var firstDatasetBarChart = datasetBarChosen(group);

    var basics = dsBarChartBasics();

    var margin = basics.margin,
            width = basics.width,
            height = basics.height,
            colorBar = basics.colorBar,
            barPadding = basics.barPadding
            ;

    var xScale = d3.scale.linear()
            .domain([0, firstDatasetBarChart.length])
            .range([0, width])
            ;

    // Create linear y scale 
    // Purpose: No matter what the data is, the bar should fit into the svg area; bars should not
    // get higher than the svg height. Hence incoming data needs to be scaled to fit into the svg area.  
    var yScale = d3.scale.linear()
            // use the max funtion to derive end point of the domain (max value of the dataset)
            // do not use the min value of the dataset as min of the domain as otherwise you will not see the first bar
            .domain([0, d3.max(firstDatasetBarChart, function (d) {
                    return d.measure;
                })])
            // As coordinates are always defined from the top left corner, the y position of the bar
            // is the svg height minus the data value. So you basically draw the bar starting from the top. 
            // To have the y position calculated by the range function
            .range([height, 0])
            ;

    //Create SVG element

    var svg = d3.select("#barChart")
            .append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .attr("id", "barChartPlot")

            ;

    var plot = svg
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
            ;

    var median = svg.append("line")

            .attr("x2", width)
            .attr("y2", (xScale/width))
            .attr("stroke-width", 2)
            .attr("stroke", "black");

    plot.selectAll("rect")
            .data(firstDatasetBarChart)
            .enter()
            .append("rect")
            .attr("x", function (d, i) {
                return xScale(i);
            })
            .attr("width", width / firstDatasetBarChart.length - barPadding)
            .attr("y", function (d) {
                return yScale(d.measure);
            })
            .attr("height", function (d) {
                return height - yScale(d.measure);
            })
            .attr("fill", "lightgrey")
            ;


    // Add y labels to plot 

    plot.selectAll("text")
            .data(firstDatasetBarChart)
            .enter()
            .append("text")
            .text(function (d) {
                return formatAsInteger(d3.round(d.measure));
            })
            .attr("text-anchor", "middle")
            // Set x position to the left edge of each bar plus half the bar width
            .attr("x", function (d, i) {
                return (i * (width / firstDatasetBarChart.length)) + ((width / firstDatasetBarChart.length - barPadding) / 2);
            })
            .attr("y", function (d) {
                return yScale(d.measure) + 14;
            })
            .attr("class", "yAxis")
            /* moved to CSS            
             .attr("font-family", "sans-serif")
             .attr("font-size", "11px")
             .attr("fill", "white")
             */
            ;

    // Add x labels to chart    

    var xLabels = svg
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + (margin.top + height) + ")")
            ;

    xLabels.selectAll("text.xAxis")
            .data(firstDatasetBarChart)
            .enter()
            .append("text")
            .text(function (d) {
                return d.category;
            })
            .attr("text-anchor", "middle")
            // Set x position to the left edge of each bar plus half the bar width
            .attr("x", function (d, i) {
                return (i * (width / firstDatasetBarChart.length)) + ((width / firstDatasetBarChart.length - barPadding) / 2);
            })
            .attr("y", 15)
            .attr("class", "xAxis")
            //.attr("style", "font-size: 12; font-family: Helvetica, sans-serif")
            ;

    // Title

    svg.append("text")
            .attr("x", (width + margin.left + margin.right) / 2)
            .attr("y", 15)
            .attr("class", "title")
            .attr("text-anchor", "middle")
            .text Breakdown 2015")
            ;
}

dsBarChart();

Answer 1

我不太了解你的y2属性。看起来您希望该行呈现为<line x1="0" y1="{height}" x2="{width}" y2="{height}" />

理想情况下，您希望根据比例函数表达这一点，因此如果它们发生变化，您将不必更新此声明。对应的d3调用将是：

var median = svg.append("line")
                .attr("stroke-width", 2)
                .attr("stroke", "black")
                .attr("x1", xScale.range()[0])
                .attr("x2", xScale.range()[1])
                .attr("y1", yScale.range()[0])
                .attr("y2", yScale.range()[0]);

另外，我认为xScale/width计算出现了问题。 xScale是一个功能。虽然你也应该研究d3.svg.axis

D3条字符x轴线不显示

1 个答案: