D3時間軸 - 爲什麼刻度標記在默認情況下似乎不可見？

我正在使用X時間軸在一個非常規的圖上工作。軸代碼是非常標準：D3時間軸 - 爲什麼刻度標記在默認情況下似乎不可見？

var xScale = d3.time.scale() 
       .domain([tlState.startdate.getTime(), tlState.enddate.getTime()]) 
       .range([0, width]); 
      var xHourAxis = d3.svg.axis() 
       .scale(xScale) 
       .ticks(d3.time.hours, 6) 
       .tickFormat(d3.time.format("%_Hh")) 
       .tickSize(5,1) 
       .orient('bottom'); 
      root.append('g') 
       .attr('class', 'axis') 
       .attr("transform", "translate(" + 0 + "," + height + ")") 
       .call(xHourAxis);

的tsState.*功能簡單地返回開始/結束的日期軸。我的問題：軸刻度標籤是可見的，但我看不到刻度線。它們顯然存在於DOM樹（<line y2="5" x2="0"></line>）中，但當我將其「stroke」屬性明確設置爲非白色時，它們才變得不可見。

我可以很容易地解決這個問題，使用CSS在tickmarks上設置筆劃...但爲什麼他們在第一個地方看不見？我GOOGLE了四周，但沒有發現任何指示刻度標記默認筆觸顏色...

非常感謝任何提示， wwwald

來源

2013-10-11 wwwald

對我來說，即使將'stroke'設置爲非白色仍然不會顯示任何東西:(我可以看到tick標記存在於DOM樹中。 – Ciwan

@Ciwan確保您的svg的大小足夠大以容納在我的情況下，我沒有指定寬度/高度attrs，並且我的svg默認爲300x150。由於我的軸被轉換爲（0，400），所以即使元素位於DOM中也不可見 – Pakman

按照SVG spec，中風的默認值是none 。由於d3使用蜱的路徑，它只顯示筆畫並且沒有填充，所以直到您對它們進行設計纔會顯示出來。

我不確定他們爲什麼決定;也許可以添加一個邊框，使其形狀更簡單一些。由於筆畫寬度默認爲1，因此添加邊框僅需要更改一個屬性。如果筆畫除了none之外的任何其他值，筆畫寬度將不得不默認爲0（默認情況下，不想給文字一個筆畫！），並且第一次設置筆畫有點不直觀：在看到任何筆畫之前，您必須知道將筆畫寬度更改爲正數。

爲什麼d3不能爲我們解決這個問題？ d3的座標軸是建立在SVG之上的，一般而言，d3可以讓你與它建立在（css/html/svg）之上的標準密切合作。這可以將媒體推向極限，但也意味着您偶爾遇到這些問題。

來源

2013-10-11 13:46:22

感謝您的回答，現在的事情更有意義奇怪的是，我沒有真正在網上找到答案，我很難成爲第一個被這個困惑......至少，我希望我不是： - ） – wwwald

D3時間軸 - 爲什麼刻度標記在默認情況下似乎不可見？

回答

相關問題