How to use the d3-shape.lineRadial function in d3-shape

To help you get started, we’ve selected a few d3-shape 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 DefinitelyTyped / DefinitelyTyped / types / d3-shape / d3-shape-tests.ts View on Github external
// use Line generator ===============================================================

defaultLine([[10, 10], [20, 10], [20, 20]]);

const lineData: LineDatum[] = [
    { x: 10, y: 10, missing: false },
    { x: 20, y: 10, missing: false },
    { x: 20, y: 20, missing: false }
];

const linePathStringMaybe: string | null = line(lineData);

// lineRadial(...) create Line generator =====================================================

let defaultLineRadial: d3Shape.LineRadial<[number, number]> = d3Shape.lineRadial();
let lineRadial: d3Shape.LineRadial = d3Shape.lineRadial();

// DEPRECATED Naming conventions test (cross-testing with new naming conventions)

const defaultRadialLine: d3Shape.RadialLine<[number, number]> = defaultLineRadial;
const radialLine: d3Shape.RadialLine = lineRadial;

defaultLineRadial = d3Shape.radialLine();
lineRadial = d3Shape.radialLine();

// configure LineRadial(...) generator ======================================================

// context(...) ----------------------------------------------------------------------

if (context !== null) {
    defaultLineRadial = defaultLineRadial.context(context); // draw to canvas
}
github vasturiano / d3-radial-axis / src / radial-axis.js View on Github external
function getSpiralPath(startAngle, endAngle, startR, endR) {
      var numPoints = (endAngle - startAngle) / (Math.PI * 2) * 40; // 40 points per 360deg

      var lineGen = d3LineRadial()
        .angle(scaleLinear().range([startAngle, endAngle]))
        .radius(scaleLinear().range([startR, endR]))
        .curve(d3CurveNatural);

      return 'M' + polar2cart(startAngle, startR).join(',')
        + lineGen(scaleLinear().ticks(numPoints));
    }
github swimlane / ngx-charts / projects / swimlane / ngx-charts / src / lib / polar-chart / polar-series.component.ts View on Github external
getLineGenerator(): any {
    return lineRadial()
      .angle(d => this.getAngle(d))
      .radius(d => this.getRadius(d))
      .curve(this.curve);
  }
github swimlane / ngx-charts / release / polar-chart / polar-series.component.js View on Github external
PolarSeriesComponent.prototype.getLineGenerator = function () {
        var _this = this;
        return lineRadial()
            .angle(function (d) { return _this.getAngle(d); })
            .radius(function (d) { return _this.getRadius(d); })
            .curve(this.curve);
    };
    PolarSeriesComponent.prototype.sortData = function (data) {
github rumble-charts / rumble-charts / src / RadialLines.js View on Github external
seriesVisible = value(seriesVisible, {seriesIndex: index, series, props});
                if (!seriesVisible) {
                    return;
                }

                seriesAttributes = value(seriesAttributes, {seriesIndex: index, series, props});
                seriesStyle = value(seriesStyle, {seriesIndex: index, series, props});

                let linePath;
                lineVisible = value(lineVisible, {seriesIndex: index, series, props});
                if (lineVisible) {
                    const line = asAreas ?
                        areaRadial()
                            .innerRadius(point => point.y0 ? radialScale(point.y0) : _radius0)
                            .outerRadius(point => radialScale(point.y)) :
                        lineRadial()
                            .radius(point => radialScale(point.y));

                    const lineColor = series.color || color(index);

                    const curve = _.isString(props.interpolation) ?
                        curves[props.interpolation] :
                        props.interpolation;

                    line.angle(point => circularScale(point.x))
                        .defined(point => _.isNumber(point.y))
                        .curve(curve);

                    lineAttributes = value(lineAttributes, {seriesIndex: index, series, props});
                    lineStyle = value([series.style, lineStyle], {seriesIndex: index, series, props});
                    lineWidth = value(lineWidth, {seriesIndex: index, series, props});
github FormidableLabs / victory / packages / victory-area / src / area.js View on Github external
const getLineFunction = (props) => {
  const { polar, scale, horizontal } = props;
  const interpolationFunction = typeof props.interpolation === "function" && props.interpolation;
  const interpolationName =
    typeof props.interpolation === "string" && toNewName(props.interpolation);
  return polar
    ? d3Shape
        .lineRadial()
        .defined(defined)
        .curve(interpolationFunction || d3Shape[`${interpolationName}Closed`])
        .angle(getAngleAccessor(scale))
        .radius(getYAccessor(scale))
    : d3Shape
        .line()
        .defined(defined)
        .curve(interpolationFunction || d3Shape[interpolationName])
        .x(horizontal ? getYAccessor(scale) : getXAccessor(scale))
        .y(horizontal ? getXAccessor(scale) : getYAccessor(scale));
};
github plouc / nivo / packages / radar / src / RadarGridLevels.js View on Github external
)}
            
        )
    }

    const radarLineGenerator = lineRadial()
        .angle(i => i * angleStep)
        .curve(curveLinearClosed)

    const points = range(dataLength)

    if (animate !== true) {
        return (
github plouc / nivo / packages / nivo-radar / src / RadarShapes.js View on Github external
({ radiusScale, angleStep, curveInterpolator }) => ({
            lineGenerator: lineRadial()
                .radius(d => radiusScale(d))
                .angle((d, i) => i * angleStep)
                .curve(curveInterpolator),
        })
    ),