¿Cómo puedo crear un D3 axis que no tiene ningún tipo de etiquetas en su garrapata marcadores?

He aquí un ejemplo que muestra lo que estoy después de, de Mike Bostock no menos. Hay varios objetos Eje gira alrededor del centro, y sólo la primera de ellas tiene marcas de graduación.

En este caso, él ha logrado el resultado de usar CSS para ocultar todos, pero el primer eje etiquetas:

.axis + .axis g text {
  display: none;
}

Sin embargo, esto todavía resulta en la creación de SVG text elementos en el DOM. Hay una manera de evitar su generación en total?

InformationsquelleAutor Drew Noakes | 2013-11-05

2 Comentarios

  1. 9

    Usted no puede evitar la generación de la text elementos sin modificar el código fuente. Sin embargo, puede eliminar los elementos después de que se han generado:

    var axisElements = svg.append("g").call(axis);
    axisElements.selectAll("text").remove();

    General, esta es probablemente la manera más flexible de este enfoque, como también se pueden quitar las etiquetas de forma selectiva. Usted puede obtener los datos utilizados para los generan a partir de la escala que se está utilizando (llamando scale.ticks()), que le permiten hacer cosas como quitar todos los impares etiquetas.

  2. 51

    Solo voy a dejar esto aquí ya que las personas son propensos a terminar en esta pregunta. Aquí están las maneras diferentes que usted puede fácilmente manipular un D3 eje.

    • Sin ningún tipo de garrapatas o rótulos de marcas de graduación:

      d3.svg.axis().tickValues([]);

      No line o text elementos son creados de esta manera.

    • Sin garrapatas y con rótulos de marcas de graduación:

      d3.svg.axis().tickSize(0);

      La line elementos creados de esta manera.

      Puede aumentar la distancia entre las marcas de graduación y el eje con .tickPadding(10), por ejemplo.

    • Con las garrapatas y sin marcas de graduación:

      d3.svg.axis().tickFormat("");

      La text elementos creados de esta manera.

    • Esto debe ser aceptado respuesta
    • Con los nuevos (manuscrito) de la API será algo como d3.axisBottom().tickFormat((domainn,number)=>{return ""});
    • Lo que está mal. La única cosa que debe cambiar (debido a D3v4, no mecanografiado) es d3.svg.axis.orient("bottom") a d3.axisBottom(). tickFormat acepta una cadena justo como siempre lo ha hecho.

Dejar respuesta

Please enter your comment!
Please enter your name here