Styling axis text: Ist dies der beste (oder einzige) Weg, dies zu tun?

Question

Ich möchte den Achsen-Datum/Uhrzeit-Text formatieren, um den Tag stärker hervortreten zu lassen.

Basierend auf einem Haufen QAs hier kam ich unter der Funktion auf. Ich arbeite an einer Zeitleiste basierend auf der Brush & Zoom example, also rufe ich diese Funktion bei jedem Pinsel und Zoom-Ereignis auf.

Die Timeline ist immer noch performant, aber ich frage mich, ob es eine effizientere Möglichkeit gibt, dies zu tun. Ich habe d3 (oder JS, für diese Angelegenheit) nicht sehr lange verwendet, so dass ich manchmal immer noch Dinge zusammenbastle, ohne völlig zu verstehen, was vor sich geht und welche möglichen Konsequenzen daraus resultieren können.

---

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" 
      } 
     }); 
} 

---

Ergebnis:

Answer 1

Nur einige Zeilen Code zu speichern, können Sie das Textelement innerhalb tickFormat wählen (obwohl das nicht der Zweck sein von tickFormat) mit this, wenn Sie Ihren Liniengenerator definieren, und gelten Sie den gewünschten Stil:

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

Hier ist eine Demo:

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>

In Ihrem Beispiel, Ihr Stil ist abhängig von den Daten. Wenn der Stil jedoch nicht von den Daten abhängt (wenn Sie beispielsweise für alle Häkchen den gleichen Stil anwenden möchten), ist die Alternative noch kürzer: Wenden Sie den Stil nur auf das enthaltende Element <g> an.

Daher ist Ihr Ansatz nicht der einzige. In Bezug darauf, dass es das beste ist, ziehe ich es vor, nichts zu sagen, da dies auf der Meinung basiert und von mehreren Faktoren abhängt.