D3.js网格和刻度问题

Question

我已经使用D3.js创建了一个图形，并且出现了x轴网格线的问题。

var data = [{ 
 
    x: '12-May-12', 
 
    y: 5 
 
    }, { 
 
    x: '30-Apr-12', 
 
    y: 28 
 
    }, { 
 
    x: '27-Apr-12', 
 
    y: 58 
 
    }, { 
 
    x: '26-Apr-12', 
 
    y: 93 
 
    }, { 
 
    x: '25-Apr-12', 
 
    y: 8 
 
    }, { 
 
    x: '24-Apr-12', 
 
    y: 48 
 
    }, { 
 
    x: '23-Apr-12', 
 
    y: 28 
 
    }, { 
 
    x: '20-Apr-12', 
 
    y: 68 
 
    }, { 
 
    x: '19-Apr-12', 
 
    y: 8 
 
    }, { 
 
    x: '18-May-12', 
 
    y: 58 
 
    }, { 
 
    x: '17-Apr-12', 
 
    y: 5 
 
    }, { 
 
    x: '16-Apr-12', 
 
    y: 80 
 
    }, { 
 
    x: '13-Apr-12', 
 
    y: 38 
 
    } 
 

 
]; 
 

 
var margin = { 
 
    top: 30, 
 
    right: 20, 
 
    bottom: 35, 
 
    left: 50 
 
    }, 
 

 
    width = 1200 - (margin.left + margin.right), 
 
    height = 360 - 2 * (margin.top + margin.bottom); 
 

 
// Parse the date/time 
 
var parseDate = d3.time.format("%d-%b-%y"); 
 
var xScale = d3.time.scale().range([0, width]) 
 
    .domain(d3.extent(data, function(d) { 
 
    return parseDate.parse(d.x); 
 
    })) 
 
    .nice(); 
 

 
var yScale = d3.scale.linear().range([height, 0]) 
 
    .domain([0, d3.max(data, function(d) { 
 
    return d.y; 
 
    })]) 
 
    .nice(); 
 

 
d3.select("#d3-chart") 
 
    .style("width", width + margin.left + margin.right + "px") 
 
    .style("height", height + 2 * (margin.top + margin.bottom) + 100 + "px"); 
 

 
d3.select("#d3-chart").select('.d3_charts').append("p") 
 
    .attr("class", "chart-header") 
 
    .text("D3 Line Chart"); 
 

 
// Adds the div for tooltips 
 
var div = d3.select("#d3-chart").append("div") 
 
    .attr("id", "tooltip") 
 
    .attr("class", "hidden"); 
 

 
div.append("p").append("span").attr("class", "value"); 
 
div.append("p").append("span").attr("class", "date"); 
 

 
var svg = d3.select("#d3-chart").select('.d3_charts') 
 
    .append("svg") 
 
    .attr("width", width + margin.left + margin.right) 
 
    .attr("height", height + margin.top + margin.bottom) 
 
    .attr("class", "bg-color") 
 
    .append("g") 
 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
 

 
svg.selectAll("line.x") 
 
    .data(xScale.ticks(10)) 
 
    .enter().append("line") 
 
    .attr("class", " x_minor minor") 
 
    .attr("x1", xScale) 
 
    .attr("x2", xScale) 
 
    .attr("y1", 0) 
 
    .attr("y2", height); 
 

 
// Draw Y-axis grid lines 
 
svg.selectAll("line.y") 
 
    .data(yScale.ticks(10)) 
 
    .enter().append("line") 
 
    .attr("class", "y_minor minor") 
 
    .attr("x1", 0) 
 
    .attr("x2", width) 
 
    .attr("y1", yScale) 
 
    .attr("y2", yScale); 
 

 
var xAxis = d3.svg.axis().scale(xScale).orient("bottom").ticks(5).tickSize(0).outerTickSize(0); 
 

 
var yAxis = d3.svg.axis().scale(yScale).orient("left").ticks(5).tickSize(0).outerTickSize(0); 
 

 
data.sort(function(a, b) { 
 
    return parseDate.parse(a.x) - parseDate.parse(b.x); 
 
}); 
 

 
svg.append('g') 
 
    .attr("class", "axis") 
 
    .attr("transform", "translate(0," + height + ")") 
 
    .call(xAxis); 
 

 
svg.append('g') 
 
    .attr("class", "axis") 
 
    .call(yAxis); 
 

 
// Define the line 
 
var lineGen = d3.svg.line() 
 
    .interpolate("monotone") 
 
    .x(function(d) { 
 
    return xScale(parseDate.parse(d.x)); 
 
    }) 
 
    .y(function(d) { 
 
    return yScale(d.y); 
 
    }); 
 

 
svg.append('path') 
 
    .attr("class", "line") 
 
    .style("stroke", "blue") 
 
    .attr('d', lineGen(data)); 
 

 
var focus = svg.append("g") 
 
    .attr("class", "focus") 
 
    .style("display", "none");

text { 
 
    font-size: 40px 
 
} 
 
text.inner-circle { 
 
    font-weight: 400; 
 
    font-size: 12px; 
 
    text-transform: uppercase; 
 
} 
 
text.inner-text { 
 
    font-weight: 400; 
 
    font-size: 36px; 
 
    font-family: 'Metric Regular', 'Metric'; 
 
    text-align: center; 
 
    font-style: normal; 
 
    text-transform: uppercase; 
 
} 
 
path { 
 
    stroke: steelblue; 
 
    stroke-width: 2; 
 
    fill: none; 
 
} 
 
.axis path, 
 
.axis line { 
 
    fill: none; 
 
    stroke: grey; 
 
    stroke-width: 2; 
 
    shape-rendering: crispEdges; 
 
} 
 
.grid .tick { 
 
    stroke: lightgrey; 
 
    stroke-opacity: 0.7; 
 
    shape-rendering: crispEdges; 
 
} 
 
.grid path { 
 
    stroke-width: 0; 
 
} 
 
.area { 
 
    fill: lightsteelblue; 
 
} 
 
#tooltip { 
 
    position: absolute; 
 
    width: 100px; 
 
    height: auto; 
 
    padding: 10px; 
 
    background-color: white; 
 
    border: 1px solid black; 
 
    text-align: center; 
 
    pointer-events: none; 
 
} 
 
#tooltip.hidden { 
 
    display: none; 
 
} 
 
#tooltip p { 
 
    margin: 0; 
 
    font-family: sans-serif; 
 
    font-size: 14px; 
 
    line-height: 12px; 
 
    vertical-align: middle; 
 
    .value { 
 
    font-weight: 700; 
 
    } 
 
    .date { 
 
    font-size: 10px; 
 
    } 
 
} 
 
.line { 
 
    fill: none; 
 
    stroke: steelblue; 
 
    stroke-width: 2px; 
 
    shape-rendering: crispEdges; 
 
} 
 
.overlay { 
 
    fill: none; 
 
    pointer-events: all; 
 
} 
 
.focus circle { 
 
    fill: none; 
 
    stroke: steelblue; 
 
} 
 
.focus text { 
 
    font: 10px sans-serif; 
 
} 
 
d3-bars { 
 
    margin: 10px; 
 
    padding-top: 20px; 
 
} 
 
svg { 
 
    display: block; 
 
    margin: auto; 
 
} 
 
div.d3_charts, 
 
.charts_top { 
 
    background-color: white; 
 
    /* padding-top: 45px;*/ 
 
} 
 
.chart-header { 
 
    font-weight: 400; 
 
    font-style: normal; 
 
    font-size: 20px; 
 
    color: #666666; 
 
    font-family: "Metric-Regular"; 
 
    padding-top: 5px; 
 
    margin-bottom: 0px !important; 
 
    margin-right: 20px; 
 
    margin-left: 20px; 
 
} 
 
.default-title-class { 
 
    text-align: left; 
 
} 
 
.lengend-action-header, 
 
.lengend-action-buttons { 
 
    float: left; 
 
    margin-right: 15px; 
 
} 
 
.lengend-action-header { 
 
    margin-left: 10px; 
 
    font-weight: normal; 
 
    font-size: 1.2em; 
 
    Font-Family: Metric-Regular; 
 
    Color: #666666; 
 
} 
 
.d3_charts_footer { 
 
    label { 
 
    font-weight: normal; 
 
    font-size: 1.2em; 
 
    Font-Family: Metric-Regular; 
 
    Color: #666666; 
 
    display: block; 
 
    cursor: pointer; 
 
    } 
 
    [type="radio"] { 
 
    border: 0; 
 
    clip: rect(0 0 0 0); 
 
    height: 1px; 
 
    margin: -1px; 
 
    overflow: hidden; 
 
    padding: 0; 
 
    position: absolute; 
 
    width: 1px; 
 
    } 
 
    [type="radio"] + span:before { 
 
    content: ''; 
 
    display: inline-block; 
 
    width: 1.1em; 
 
    height: 1.1em; 
 
    vertical-align: -0.25em; 
 
    border-radius: 1em; 
 
    border: 0.35em solid #fff; 
 
    box-shadow: 0 0 0 0.10em #36B18D; 
 
    margin-right: 0.75em; 
 
    transition: 0.5s ease all; 
 
    } 
 
    [type="radio"]:checked + span:before { 
 
    background: #36B18D; 
 
    box-shadow: 0 0 0 0.10em #36B18D; 
 
    } 
 
    [type="radio"]:focus + span::after { 
 
    font-size: 1.2em; 
 
    line-height: 1; 
 
    vertical-align: -0.125em; 
 
    } 
 
    .my-legend { 
 
    margin-top: 5px; 
 
    } 
 
    .my-legend .legend-title { 
 
    text-align: left; 
 
    margin-bottom: 5px; 
 
    font-weight: bold; 
 
    font-size: 90%; 
 
    } 
 
    .my-legend .legend-scale ul { 
 
    margin: 0; 
 
    margin-bottom: 5px; 
 
    padding: 0; 
 
    float: left; 
 
    list-style: none; 
 
    } 
 
    .my-legend .legend-scale ul li { 
 
    display: inline-block; 
 
    font-size: 80%; 
 
    list-style: none; 
 
    line-height: 18px; 
 
    vertical-align: text-top; 
 
    } 
 
    .my-legend ul.legend-labels li span { 
 
    display: inline-block; 
 
    height: 16px; 
 
    width: 20px; 
 
    margin-right: 5px; 
 
    margin-left: 10px; 
 
    border: 1px solid #999; 
 
    } 
 
    .my-legend a { 
 
    color: #777; 
 
    } 
 
    .legend-labels li:nth-child(even) { 
 
    margin-right: 15px; 
 
    } 
 
} 
 
svg.bg-color { 
 
    background-color: white; 
 
} 
 
.axis text { 
 
    font: 10px sans-serif; 
 
} 
 
.axis path { 
 
    fill: none; 
 
    stroke: #ccc; 
 
    stroke-width: 1px; 
 
    shape-rendering: crispEdges; 
 
} 
 
.axis line { 
 
    fill: none; 
 
    stroke: #ccc; 
 
    stroke-width: 1px; 
 
} 
 
.x_minor { 
 
    stroke: #cccccc; 
 
    stroke-width: 1px; 
 
} 
 
.y_minor:nth-child(even) { 
 
    stroke: #cccccc; 
 
} 
 
.y_minor:nth-child(odd) { 
 
    stroke: #f6f6f6; 
 
} 
 
.tick text { 
 
    Font-Family: Metric-Regular; 
 
    Font-Size: 12px; 
 
    Color: #666666; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<div id="d3-chart"> 
 
    <div class="d3_charts"></div> 
 
</div>

我的问题是如何格式化在x轴上的网格，所以它看起来就像在画面不论数据所示的网格？

如何在x和y轴线和刻度值之间添加空格。

Answer 1

• 网格线

我想，你希望每个看到蜱不是每计算打勾网格线。这可以通过在轴设置使用innerTickSize，明确实施：根据意见

svg.append('g') 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(xAxis) 
    .selectAll("text") 
    // select the tick value and adjust its position after axis gets called 
    .attr("y", 10) 
    .attr("x", 6) 

    svg.append('g') 
    .attr("class", "y axis") 
    .call(yAxis) 
    .selectAll("text") 
    .attr("y", 3) 
    .attr("x", -10) 

更新：

轴线和刻度值之间

var xAxis = d3.svg.axis().scale(xScale) 
.orient("bottom") 
.ticks(5) 
.tickSize(0) 
.innerTickSize(-height) // set this value to be the size of the chart area 
.outerTickSize(0); 


var yAxis = d3.svg.axis().scale(yScale) 
.orient("left") 
.ticks(5) 
.tickSize(0) 
.innerTickSize(-width) 
.outerTickSize(0); 

• 添加空间

  第一个垂直网格线更接近y轴的原因是，在轴设置中，指定，而源数据中的日期不是连续数据。

  我要说依赖于实现目标，下面的方法可能是适当的：

  • 删除ticks(5)设置，让D3做蜱计算工作，如在此plunkr

  • 使用固定节拍值，以产生指定的蜱，如：

    var xAxis = d3.svg.axis().scale(xScale) 
    .orient("bottom") 
    .tickValues([ 
        parseDate.parse('30-Apr-12'), 
        parseDate.parse('25-Apr-12'), 
        parseDate.parse('23-Apr-12'), 
        parseDate.parse('17-Apr-12'), 
    ]) 
        .innerTickSize(-height) 
        .outerTickSize(0); 
    

  • 或可以预先处理所述源数据，以使得该日期是连续的，WHI ch意味着更均匀分布的刻度