爲什麼使用d3js產生的軸是從例如顯著不同即使代碼是相似？

我剛開始學習D3 2月，當我嘗試應用在一個項目中生成一些圖表，我發現我所產生的軸是從大多數例子中的一個顯著不同。爲什麼使用d3js產生的軸是從例如顯著不同即使代碼是相似？

相反優雅的薄軸線與明確蜱那些在實施例中的，它似乎是一個巨大的難看的黑色條。這是我相對於軸代碼：

var scale_x = d3.time.scale().range([0,width-40]).domain(d3.extent(nested, function(d){return d.key;})), 
    scale_y = d3.scale.linear().range([height-40,0]).domain([0,d3.max(nested, function(d){return d.values})]); 

var xAxis = d3.svg.axis().scale(scale_x).orient("bottom").ticks(10), 
    yAxis = d3.svg.axis().scale(scale_y).orient("left").ticks(10); 

var chartLine = d3.svg.line().interpolate("basis") 
    .x(function(d){return scale_x(d.key)}) 
    .y(function(d){return scale_y(d.values)}); 

chart_container.append("g") 
    .attr("class","x axis") 
    .attr("transform", "translate(40,560)") 
    .call(xAxis) 

chart_container.append("g") 
    .attr("class","y axis") 
    .attr("transform", "translate(40,0)") 
    .call(yAxis) 
    .append("text") 
    .attr("transform", "rotate(-90)") 
    .attr("y", 6) 
    .attr("dy", ".71em") 
    .style("text-anchor", "end") 
    .text("frequency");

而且它的結果是這樣的：

，你可以像mbostock’s block #7621155: Natural Log Scale的衆多例子中的一個比較。

所以任何人都可以告訴我，如果有在d3.js一些隱藏的機制，決定軸應該怎麼樣子的呢？

非常感謝你！

來源

2015-11-05 Nan Li

隱藏的機制是CSS :)

這些添加到你的CSS

.line { 
    fill: none; 
    stroke: steelblue; 
    stroke-width: 1.5px; 
} 

.axis--x text { 
    font: 10px sans-serif; 
} 

.axis--y text { 
    font: oblique 15px Georgia, serif; 
} 

.axis path, 
.axis line { 
    fill: none; 
    stroke: #000; 
    shape-rendering: crispEdges; 
}

希望這有助於！

來源

2015-11-05 08:42:13 Cyril

爲什麼使用d3js產生的軸是從例如顯著不同即使代碼是相似？

回答

相關問題