Javascript/D3 ---標籤的條件格式

我有一個熱圖日曆，其中包含的小時數分爲如下幾個值： 6,30,7,30,8,30。所以，你可以假設6是6點，30點之後是6點30分。我希望小時值更大（比如說12px），30是CSS中的默認值（比如說10px）。這裏是JavaScript我已經密謀小時標籤：Javascript/D3 ---標籤的條件格式

設置顏色，日，小時

var margin = { top: 20, right: 0, bottom: 120, left: 30 }, 
      width = 1080 - margin.left - margin.right, 
      height = 430 - margin.top - margin.bottom, 
      gridSize = Math.floor(width/28), 
      legendElementWidth = gridSize*2, 
      buckets = 9, 
      colors = ["#f03b20","#fd8d3c","#feb24c","#fed976","#ffffb2","#c2e699","#78c679","#31a354","#006837"], //,"#081d58"], // alternatively colorbrewer.YlGnBu[9] 
      days = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], 
      times = ["6", "30", "7", "30", "8", "30", "9", "30", "10", "30", "11", "30", "12", "30", "1", "30", "2", "30", "3", "30", "4", "30", "5", "30","6","30","7","30"];

繪製x軸的標籤。

var timeLabels = svg.selectAll(".timeLabel") 
       .data(times) 
       .enter().append("text") 
       .text(function(d) { return d; }) 
       .attr("x", function(d, i) { return i * gridSize; }) 
       .attr("y", 0) 
       .style("text-anchor", "middle") 
       .attr("transform", "translate(" + gridSize/2 + ", -6)") 
       .attr("class", function(d, i) { return ((i >= 7 && i <= 16) ? "timeLabel mono axis axis-worktime" : "timeLabel mono axis"); });*

我的問題：我怎麼能修改此Javascript有一個條件格式，以便小時數（1-12）具有較大的字體和30使用默認？

來源

2014-01-17 simplemts

您可以通過一個函數來設置font-size屬性：

.attr("font-size", function(d) { return +d < 20 ? "12px" : "10px"; });

一般情況下，它會更D3-喜歡用的時間尺度和軸把它格式化，並自動將標籤貼。這會讓你想做的事情變得更加困難，所以你可以堅持自己的想法。

來源

2014-01-17 18:52:26

很好，謝謝。 – simplemts

Javascript/D3 ---標籤的條件格式

回答

相關問題