造型軸文本：這是做到最好（或唯一）的方式嗎？

我想對軸的日期/時間文本進行樣式設置，以使日子更加突出。造型軸文本：這是做到最好（或唯一）的方式嗎？

基於一堆的問題答案在這裏，我想出了一個具有如下功能。我正在研究基於Brush & Zoom example的時間線，因此我在每個畫筆和縮放事件上調用此函數。

時間線仍然是高性能的，但我想知道是否有更有效的方法來做到這一點。我一直沒有使用d3（或JS，因爲這個問題）很長時間，所以我有時還在拼湊事物，而沒有完全理解正在發生的事情以及可能產生的後果。

function styleAxis() { 
    d3.selectAll('g.tick') 
     .select('text') 
     .style('fill', function (d) { 
      var txt = d3.select(this).text().split(" "); 
      var days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] 

      if (days.indexOf(txt[0]) != -1) { 
       return "white" 
      } else { 
       return "gray" 
      } 
     }); 
}

結果：

來源

2017-07-25 No Grabbing

我會用js在特殊標籤上設置一個atrtrib，然後在css中點擊它;更快的渲染（css在C中運行），更好的分離，以及更容易添加額外的樣式後/媒體查詢等... – dandavis

只是爲了節省您的一些代碼行，你可以（選擇內部tickFormat文本元素，儘管這不是目的tickFormat）使用this，當你定義你的線條生成器，和應用所需的樣式：

var axis = d3.axisBottom(scale) 
    .tickFormat(function(d) { 
    if (d === "bar") { 
     d3.select(this).style("fill", "gray") 
    } 
    return d; 
    });

這裏是一個演示：

var svg = d3.select("svg") 
 
var scale = d3.scaleBand() 
 
    .range([20, 280]) 
 
    .domain(["foo", "bar", "baz"]); 
 
var axis = d3.axisBottom(scale) 
 
    .tickFormat(function(d) { 
 
    if (d === "bar") { 
 
     d3.select(this).style("fill", "gray") 
 
    } 
 
    return d; 
 
    }); 
 
var gX = svg.append("g") 
 
    .attr("transform", "translate(0,50)"); 
 
axis(gX);

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<svg></svg>

在你的榜樣，你的風格依賴於數據。另一方面，如果樣式不依賴於數據（例如，當您想對所有滴答應用相同樣式），則替代方案更短：只將樣式應用於包含元素的元素。

因此，您的方法不是唯一的方法。關於這是最好我不喜歡說什麼，因爲這是基於意見，並取決於幾個因素。

來源

2017-07-26 00:08:48

造型軸文本：這是做到最好（或唯一）的方式嗎？

回答

相關問題