Question

正如标题所说，我正在使用D3J创建一个条形图。在X轴开头的条形码中，我需要更改以下内容？

＆＃13;

var allBarsDatasets = [
    {
        "xAxisTickValue": "10-1",
        "barValue": 18
    },
    {
        "xAxisTickValue": "10-2",
        "barValue": 17
    },
    {
        "xAxisTickValue": "10-3",
        "barValue": 17
    },
    {
        "xAxisTickValue": "10-4",
        "barValue": 19
    },
    {
        "xAxisTickValue": "11-1",
        "barValue": 19
    },
    {
        "xAxisTickValue": "11-2",
        "barValue": 14
    },
    {
        "xAxisTickValue": "11-3",
        "barValue": 18
    },
    {
        "xAxisTickValue": "11-4",
        "barValue": 12
    },
    {
        "xAxisTickValue": "12-1",
        "barValue": 16
    },
    {
        "xAxisTickValue": "12-2",
        "barValue": 15
    },
    {
        "xAxisTickValue": "12-3",
        "barValue": 14
    },
    {
        "xAxisTickValue": "12-4",
        "barValue": 15
    },
    {
        "xAxisTickValue": "13-1",
        "barValue": 16
    },
    {
        "xAxisTickValue": "13-2",
        "barValue": 17
    },
    {
        "xAxisTickValue": "13-3",
        "barValue": 12
    },
    {
        "xAxisTickValue": "13-4",
        "barValue": 17
    },
    {
        "xAxisTickValue": "14-1",
        "barValue": 17
    },
    {
        "xAxisTickValue": "14-2",
        "barValue": 16
    },
    {
        "xAxisTickValue": "14-3",
        "barValue": 14
    },
    {
        "xAxisTickValue": "14-4",
        "barValue": 15
    },
    {
        "xAxisTickValue": "15-1",
        "barValue": 15
    },
    {
        "xAxisTickValue": "15-2",
        "barValue": 19
    },
    {
        "xAxisTickValue": "15-3",
        "barValue": 17
    },
    {
        "xAxisTickValue": "15-4",
        "barValue": 12
    },
    {
        "xAxisTickValue": "16-1",
        "barValue": 13
    },
    {
        "xAxisTickValue": "16-2",
        "barValue": 17
    },
    {
        "xAxisTickValue": "16-3",
        "barValue": 17
    },
    {
        "xAxisTickValue": "16-4",
        "barValue": 19
    },
    {
        "xAxisTickValue": "17-1",
        "barValue": 18
    },
    {
        "xAxisTickValue": "17-2",
        "barValue": 13
    },
    {
        "xAxisTickValue": "17-3",
        "barValue": 17
    },
    {
        "xAxisTickValue": "17-4",
        "barValue": 16
    },
    {
        "xAxisTickValue": "18-1",
        "barValue": 10
    },
    {
        "xAxisTickValue": "18-2",
        "barValue": 15
    },
    {
        "xAxisTickValue": "18-3",
        "barValue": 17
    },
    {
        "xAxisTickValue": "18-4",
        "barValue": 17
    },
    {
        "xAxisTickValue": "19-1",
        "barValue": 18
    },
    {
        "xAxisTickValue": "19-2",
        "barValue": 14
    },
    {
        "xAxisTickValue": "19-3",
        "barValue": 16
    },
    {
        "xAxisTickValue": "19-4",
        "barValue": 13
    },
    {
        "xAxisTickValue": "20-1",
        "barValue": 15
    },
    {
        "xAxisTickValue": "20-2",
        "barValue": 17
    },
    {
        "xAxisTickValue": "20-3",
        "barValue": 14
    },
    {
        "xAxisTickValue": "20-4",
        "barValue": 16
    },
    {
        "xAxisTickValue": "21-1",
        "barValue": 18
    },
    {
        "xAxisTickValue": "21-2",
        "barValue": 14
    },
    {
        "xAxisTickValue": "21-3",
        "barValue": 17
    },
    {
        "xAxisTickValue": "21-4",
        "barValue": 15
    },
    {
        "xAxisTickValue": "22-1",
        "barValue": 16
    },
    {
        "xAxisTickValue": "22-2",
        "barValue": 17
    },
    {
        "xAxisTickValue": "22-3",
        "barValue": 16
    },
    {
        "xAxisTickValue": "22-4",
        "barValue": 16
    },
    {
        "xAxisTickValue": "23-1",
        "barValue": 16
    },
    {
        "xAxisTickValue": "23-2",
        "barValue": 16
    },
    {
        "xAxisTickValue": "23-3",
        "barValue": 15
    },
    {
        "xAxisTickValue": "23-4",
        "barValue": 16
    },
    {
        "xAxisTickValue": "24-1",
        "barValue": 15
    },
    {
        "xAxisTickValue": "24-2",
        "barValue": 15
    },
    {
        "xAxisTickValue": "24-3",
        "barValue": 17
    },
    {
        "xAxisTickValue": "24-4",
        "barValue": 13
    },
    {
        "xAxisTickValue": "6-1",
        "barValue": 16
    },
    {
        "xAxisTickValue": "6-2",
        "barValue": 16
    },
    {
        "xAxisTickValue": "6-3",
        "barValue": 16
    },
    {
        "xAxisTickValue": "6-4",
        "barValue": 15
    },
    {
        "xAxisTickValue": "7-1",
        "barValue": 12
    },
    {
        "xAxisTickValue": "7-2",
        "barValue": 18
    },
    {
        "xAxisTickValue": "7-3",
        "barValue": 15
    },
    {
        "xAxisTickValue": "7-4",
        "barValue": 18
    },
    {
        "xAxisTickValue": "8-1",
        "barValue": 16
    },
    {
        "xAxisTickValue": "8-2",
        "barValue": 15
    },
    {
        "xAxisTickValue": "8-3",
        "barValue": 17
    },
    {
        "xAxisTickValue": "8-4",
        "barValue": 16
    },
    {
        "xAxisTickValue": "9-1",
        "barValue": 17
    },
    {
        "xAxisTickValue": "9-2",
        "barValue": 14
    },
    {
        "xAxisTickValue": "9-3",
        "barValue": 18
    },
    {
        "xAxisTickValue": "9-4",
        "barValue": 18
    }
];
    // TODO: format labels and values
    // rotate x-axis ticks; if number user shorter format
    // use shorter format for y-axis values
    // correctly position x-axis and y-axis labels
    
    $("#chartDiv").html("");
    var barColor = '#384a60';
    
    // calculate total frequency by state for all segment.
    var fD = allBarsDatasets.map(function(d){return [d.xAxisTickValue,d.barValue];});
    
/*     var margin = {top: 20, right: 100, bottom: 30, left: 100},
        width = 600 - margin.left - margin.right,
        height = 310 - margin.top - margin.bottom;  */

    var margin = {top: 20, right: 100, bottom: 30, left: 100},
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;    
    

        var padding = 100;
            
        //create svg for histogram.
        var svg = d3.select("#chartDiv").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 + ")");

        // create function for x-axis mapping.
        var x = d3.scale.ordinal().rangeRoundBands([0, width], 0.1)
                .domain(fD.map(function(d) { return d[0]; }));

        // Add x-axis to the histogram svg.
        svg.append("g").attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(d3.svg.axis()
                .scale(x)
                .orient("bottom")
                .innerTickSize(-height)
                .outerTickSize(0)
                .tickPadding(10));
        
        // create function for y-axis mapping.
        var yMin = d3.min(fD.map(function(d) { return d[1]; }));
        
        var yMax = d3.max(fD.map(function(d) { return d[1]; }));
        
        var y = d3.scale.linear().range([height, 0])
            .domain([0, d3.max(fD, function(d) { return d[1]; })]);
        
        var yScaleGridLines = d3.scale.linear()
            .domain([yMin, yMax])
            .range([height, 0]);
            
        var yAxisGridLines = d3.svg.axis()
            .scale(yScaleGridLines)
            .orient("left")
            .innerTickSize(-width)
            .outerTickSize(0)
            .tickPadding(10);

        svg.append("g")
          .attr("class", "y axis")
          .call(yAxisGridLines);
        
        // Create bars for histogram to contain rectangles and freq labels.
        var bars = svg.selectAll(".bar").data(fD).enter()
                .append("g").attr("class", "bar");
        
        //create the rectangles.
        bars.append("rect")
            .attr("x", function(d) { return x(d[0]); })
            .attr("y", function(d) { return y(d[1]); })
            .attr("width", x.rangeBand())
            .attr("height", function(d) { return height - y(d[1]); })
            .attr('fill',barColor);

＆＃13;

#chartDiv .axis path,
#chartDiv .axis line{
    fill: none;
    stroke: black;
}

#chartDiv .line{
    fill: none;
    stroke: blue;
    stroke-width: 2px;
}

#chartDiv .tick text{
    font-size: 12px;
}

#chartDiv .tick line{
    opacity: 0.2;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="chartDiv">
</div>

＆＃13;

起初我认为这是一个数据问题，但我没有看到任何奇怪的内容。我也尝试从我设置X轴的部分删除属性，但它没有用。

Answer 1

感谢@AndrewReid让我走上正轨。我根据你对我的问题的评论来计算每个论点的含义;第二个参数是条形之间的空格，第三个参数是条形之间的填充以及X轴的开始和结束。以下值适用于我的需求d3.scale.ordinal().rangeRoundBands([0, width], 0.1, 0)

在X轴开始后，D3Js条形图条开始

1 个答案: