renderAxis() { const axisType = `axis${this.props.orient}` const axis = d3Axis[axisType]() .scale(this.props.scale) .tickSize(-this.props.tickSize) .tickPadding([12]) .ticks([4]) d3Select(this.axisElement).call(axis) }
/** * Sets d3 tick function and configures other d3 stuff such as forces and drag events. * @returns {undefined} */ _graphForcesConfig() { this.state.simulation.nodes(this.state.d3Nodes).on('tick', this._tick); const forceLink = d3ForceLink(this.state.d3Links) .id(l => l.id) .distance(D3_CONST.LINK_IDEAL_DISTANCE) .strength(D3_CONST.FORCE_LINK_STRENGTH); this.state.simulation.force(CONST.LINK_CLASS_NAME, forceLink); const customNodeDrag = d3Drag() .on('start', this._onDragStart) .on('drag', this._onDragMove) .on('end', this._onDragEnd); d3Select(`#${this.state.id}-${CONST.GRAPH_WRAPPER_ID}`) .selectAll('.node') .call(customNodeDrag); }
/** * Sets d3 tick function and configures other d3 stuff such as forces and drag events. * @returns {undefined} */ _graphForcesConfig() { this.state.simulation.nodes(this.state.d3Nodes).on('tick', this._tick); const forceLink = d3ForceLink(this.state.d3Links) .id(l => l.id) .distance(D3_CONST.LINK_IDEAL_DISTANCE) .strength(D3_CONST.FORCE_LINK_STRENGTH); this.state.simulation.force(CONST.LINK_CLASS_NAME, forceLink); const customNodeDrag = d3Drag() .on('start', this._onDragStart) .on('drag', this._onDragMove) .on('end', this._onDragEnd); d3Select(`#${this.state.id}-${CONST.GRAPH_WRAPPER_ID}`) .selectAll('.node') .call(customNodeDrag); }