Comments (8)
Have you tested your propose change? Note that lines are rendered offset by half a pixel to produce crisp edges:
line = line.merge(tickEnter.append("line")
.attr("stroke", "#000")
.attr(x + "2", k * tickSizeInner)
.attr(y + "1", 0.5)
.attr(y + "2", 0.5));
from d3-axis.
I'm admittedly somewhat new to d3.js and I am not familiar with the build process, so i haven't tested the fix.
However, I made an example here to demonstrate what I'm seeing.
https://jsfiddle.net/vpb7aLpc/3/
Notice that the tick marks are slightly off-center. The console output shows e.g. translate by 8 pixels for a 15-pixel-wide bar, which I think is off by 1. The half pixel shift mentioned above only puts it squarely in that pixel.
Am I misunderstanding something?
from d3-axis.
Here’s a pixel grid overlaid on your example:
And without rangeRound for comparison:
I see what you mean now. If the bands are 15px wide, then there should be 7px on either side of the tick (7 + 1 + 7 = 15). Instead there is 8px on the left side and 6px on the right side. And both range and rangeRound should produce the same result.
from d3-axis.
Hmm. Making the proposed change fixes the above example, but negatively affects point scales without rangeRound. Here’s before (with the ticks in red, so they can be seen overlaid on top of the domain path):
And after:
However, we can fix this fairly easily like so:
var offset = Math.max(0, scale.bandwidth() - 1) / 2;
from d3-axis.
Okay, fix pending in #38. Look good?
from d3-axis.
Appreciate the time taken to look into this! A few comments:
- The max with 0 would only come into play if bandwidth is < 1 pixel, in which case the shift-by-half-pixel logic is going to make it look funny anyways. So I think it might be unnecessary?
- I am a little confused about the second set of screenshots: how come the 0/2 tick labels are now shifted to the edges of the band? Is this just a screenshot issue?
from d3-axis.
The bandwidth is zero for point scales (d3.scalePoint), which is what I was discussing in #37 (comment).
from d3-axis.
Got it. I wasn't familiar with that scale so I'd glossed over the phrase "point scale" when I read your comment. I think it looks good to me.
from d3-axis.
Related Issues (20)
- Support external rendering HOT 3
- How to apply pan/zoom to rotated X Axis labels? HOT 1
- Default formatter shows month name instead of Sunday HOT 2
- Date boundary issue for months with 31 days HOT 1
- Suggestion: Add axisTop example HOT 1
- `axis.tickValues` could also return `values`? HOT 3
- Render in vanilla HTML? HOT 2
- Right-align tick text in axisRight() ? HOT 1
- 如何入参是空,那么链式调用将被破坏
- Show scale extrema values in ticks HOT 1
- More configuration options?
- Uncaught TypeError: setting getter-only property "top" when calling axis function HOT 5
- not able to add custom attributes to the axis HOT 1
- Ticks with varying size
- Ticks misalignment HOT 2
- An option to disable the domain line HOT 1
- An option to generate grid lines HOT 3
- Ability to use `d3.timeXXX` on a scaleBand HOT 8
- Ability to set axis ticks count when using axis `tickFormat` function HOT 6
- d3-axis does not update SVG attributes when switching between axis orientations HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from d3-axis.