How to use the d3-axis/src/axis.axisBottom function in d3-axis

To help you get started, we’ve selected a few d3-axis examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github timqian / chart.xkcd / src / utils / addAxis.js View on Github external
const xAxis = (parent, {
  xScale, tickCount, moveDown, fontFamily, unxkcdify, stroke,
}) => {
  parent
    .append('g')
    .attr('transform', `translate(0,${moveDown})`)
    .call(
      axisBottom(xScale)
        .tickSize(0)
        .tickPadding(6)
        .ticks(tickCount),
    );

  parent.selectAll('.domain')
    .attr('filter', !unxkcdify ? 'url(#xkcdify)' : null)
    .style('stroke', stroke);

  parent.selectAll('.tick > text')
    .style('font-family', fontFamily)
    .style('font-size', '16')
    .style('fill', stroke);
};
github shiyiya / chart.xkcd-vue / packages / components / XYAxis.vue View on Github external
handleX() {
      const { xScale, tickCount, height } = this

      select(this.$refs.xScale)
        .attr('transform', `translate(0, ${height})`)
        .call(
          axisBottom(xScale)
            .tickSize(0)
            .tickPadding(6)
            .ticks(tickCount)
        )
    }
  },

d3-axis

Displays automatic reference lines for scales.

ISC
Latest version published 3 years ago

Package Health Score

71 / 100
Full package analysis