Vraag Verwijder de eindteksten van de as D3.js


Ik gebruik (de uitstekende) D3.js om enkele plots te genereren en ik kan geen manier vinden om de eindteksten van de x- en y-as te verwijderen.

Neem bijvoorbeeld de y-as.

Wanneer de waarde voor het einde van de vink samenvalt met een label, kan ik het goed gebruiken.

Maar wanneer het label met de laatste ronde onder het einde van de grafiek ligt, krijg ik twee tekens: één voor het laatste afgeronde label en één erboven aan het einde van de y-as.

Ik wil niet dat deze eindtekst zichtbaar is, omdat ik het feit vind dat deze in minder dan de reguliere inverval tussen labels staat die de aandacht afleiden.

Zie hier voor een voorbeeld van wat ik beschrijf:

http://www.road2stat.com/cn/wp-content/attachments/2012/04/d3_interactive.png

Enige tips?

PS. Als een reactie gesuggereerd, kon ik de tikken expliciet instellen. Maar ik hou van het gemak van de impliciete gegenereerde tikken, wil gewoon niet dat niet-geëtiketteerde tekens de as vervuilen. Dus een ideale oplossing (indien aanwezig) zou ook rekening houden met dan.


29
2017-12-02 12:23


oorsprong


antwoorden:


De axis.tick* functies kan je daar helpen. Je hebt een aantal mogelijkheden om het gedrag dat je beschrijft te voorkomen. U kunt de tikken expliciet instellen met behulp van de tickValues() functie. Of u kunt de grootte van de eindteksten instellen op 0 met tickSize(). U kunt ook de onderliggende schaal regelen met behulp van de ticks() functie.

Afhankelijk van uw specifieke scenario, kan een van deze opties logischer zijn dan de andere.


15
2017-12-02 12:49



Voor iedereen die deze vraag heeft gedaan, want alles wat je wilt doen is de twee eindteksten van een as verwijderen, dit volstaat:

.outerTickSize(0)

Voeg dat toe aan elke as-call die u plaatst, zoals:

d3.svg.axis().outerTickSize(0)

93
2018-01-27 17:21



Als u alleen de grenswaarden wilt verbergen en het impliciete gedrag in het midden wilt behouden, kunt u de as wijzigen SVG voorwerp net nadat je het hebt getekend

Stel dat je hier je as tekent / bijwerkt:

g.selectAll(".x.axis").call(xAxis);

Nu zal g bevatten .tick geklasseerde objecten. elk van hen zal verwijzen naar één tick-waarde. U kunt ze selecteren en het zichtbaarheidskenmerk instellen:

d3.select(g.selectAll(".tick")[0][0]).attr("visibility","hidden");

Als alternatief kunt u elk specifiek teken aan de hand van de waarde ervan aanraken d of index i

g.selectAll(".tick")
    .each(function (d, i) {
        if ( d == 0 ) {
            this.remove();
        }
    });

Wees voorzichtig met .remove() though. Soms wordt de eerste waarde al verwijderd en wordt de tweede waarde verwijderd bij het bijwerken. Zichtbaarheid verborgen is betrouwbaarder.

krediet voor Ian & Denis bij d3-js google group https://groups.google.com/forum/#!topic/d3-js/LBxR_finiME


6
2018-05-25 09:36



Verwijder eindtekentjes met zoiets: noteer tickSize (inner, outer)

var xAxis = d3.svg.axis().scale(x).
                tickSize(3, 0).orient("bottom").tickFormat( ... );

Als u buitenparam op 0 zet in tickSize (binnenste, buitenste), krijgt u de buitenste teken niet.


3
2018-06-12 15:36



Gebruik in d3.js v4.x .tickSizeOuter (0), like

self._leftAxis = d3.axisLeft(self._y)
      .tickSizeInner(3) // the inner ticks will be of size 3
      .tickSizeOuter(0); // the outer ones of 0 size

Merk op dat het onderstaande nulteken als een inval beschouwd wordt

enter image description here

Dit d3.js v4-document: https://github.com/d3/d3-axis


2
2018-06-04 02:53



Ik weet niet zeker wat de buitenste maat te maken heeft met de eerste of laatste tik van een as.


tickSize bestuurt eigenlijk de lengte van de <line> element binnenkant van de groep tick. Daarom gaat het over de afstand tussen de <text> element van de teek en de as of de lengte van helperlijnen beginnend bij de tick-posities, die afhankelijk is van de oriëntatie van de as en waarheen verplaatst is (via css translate()).

Dit is hoe een teekgroep eruit ziet:

<g transform="translate(10,0)" style="opacity: 1;" class="tick">
   <line x2="0" y2="-15"></line>
   <text x="0" y="-18" style="text-anchor: middle;" dy="0em">0.0</text>
</g>

Nu kunt u de x2 en de y2 attribuut van de <line> element met de tickSize methode. Hier gebruik ik tickSize(15, 0) en orientation('top') voor de x-as, die naar de onderkant van het diagram is verplaatst. Dus de labels van de teken projecteren op een nogal rommelige manier in de grafiek.


1
2017-12-15 07:39