How to use the d3-hierarchy.partition function in d3-hierarchy

To help you get started, we’ve selected a few d3-hierarchy 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 contiamo / operational-ui / packages / visualizations / src / Sunburst / data_handler.ts View on Github external
return -1
      }
      // Sort largest to smallest
      return b.value - a.value
    }

    const hierarchyData: HierarchyNode = d3Hierarchy(data)
      .each(this.assignColors.bind(this))
      .each(this.assignNames.bind(this))
      .each(this.assignIDs.bind(this))
      .eachAfter(this.assignValues.bind(this))
      .sort(this.state.current.get("config").sort ? sortingFunction : undefined)

    this.total = hierarchyData.value

    this.topNode = d3Partition()(hierarchyData)
      .descendants()
      .find((d: Datum): boolean => d.depth === 0)

    this.stateWriter("topNode", this.topNode)

    this.data = d3Partition()(hierarchyData)
      .descendants()
      .filter((d: Datum): boolean => !isEmpty(d.data))

    this.checkDataValidity()

    forEach(
      (d: Datum): void => {
        d.zoomable = d.parent && !!d.children
      },
    )(this.data)
github heimdalljs / heimdalljs-visualizer / app / utils / d3-flame-graphs-v4 / d3-flame-graph.js View on Github external
partition(data) {
    let d3partition = partition();

    let root = hierarchy(data)
      .sum(d => d.data ? d.data.value : d.value)
      .sort((a, b) => {
        if (a.filler) {
          return 1;  // move fillers to the right
        }
        if (b.filler) {
          return -1; // move fillers to the right
        }
        const name = a.data.name || "";
        return name.localeCompare(b.data.name);
      });
    return d3partition(root).descendants();
  },
github ethantran / react-native-examples / src / components / AnimatedSvgD3HierarchyPartition.js View on Github external
function createGenerator(
    props,
    generator?: Layout
): Layout {
    generator = generator || d3.partition();
    return args.reduce((acc: Layout, arg: string) => {
        const prop = props[arg];
        if (prop) {
            return acc[arg](prop);
        }
        return acc;
    }, generator);
}
github uber / react-vis / src / treemap / index.js View on Github external
_getNodesToRender() {
    const {innerWidth, innerHeight} = this.state;
    const {data, mode, padding, sortFunction, getSize} = this.props;
    if (!data) {
      return [];
    }

    if (mode === 'partition' || mode === 'partition-pivot') {
      const partitionFunction = partition()
        .size(
          mode === 'partition-pivot'
            ? [innerHeight, innerWidth]
            : [innerWidth, innerHeight]
        )
        .padding(padding);
      const structuredInput = hierarchy(data)
        .sum(getSize)
        .sort((a, b) => sortFunction(a, b, getSize));
      const mappedNodes = partitionFunction(structuredInput).descendants();
      if (mode === 'partition-pivot') {
        return mappedNodes.map(node => ({
          ...node,
          x0: node.y0,
          x1: node.y1,
          y0: node.x0,
github plouc / nivo / packages / sunburst / src / Sunburst.js View on Github external
withProps(({ width, height }) => {
        const radius = Math.min(width, height) / 2

        const partition = Partition().size([2 * Math.PI, radius * radius])

        return { radius, partition, centerX: width / 2, centerY: height / 2 }
    }),
    withPropsOnChange(['cornerRadius'], ({ cornerRadius }) => ({
github hshoff / vx / packages / vx-hierarchy / src / hierarchies / Partition.jsx View on Github external
export default function Partition({
  top,
  left,
  className,
  root,
  size,
  round,
  padding,
  children,
  nodeComponent = DefaultNode,
}) {
  const partition = d3partition();
  if (size) partition.size(size);
  if (round) partition.round(round);
  if (padding) partition.padding(padding);

  const data = partition(root);

  if (children) return children(data);

  return (
    
      {nodeComponent &&
        data.descendants().map((node, i) => {
          return (
            
              {React.createElement(nodeComponent, { node })}
github contiamo / operational-visualizations / src / Sunburst / data_handler.ts View on Github external
this.assignIDs.bind(this),
      this.assignZoomable.bind(this),
      this.assignValues.bind(this),
    )(data);

    const hierarchyData = d3Hierarchy(processedData).sort(
      this.state.current.getConfig().sort ? sortingFunction : () => -1,
    );

    this.topNode = d3Partition()(hierarchyData)
      .descendants()
      .find(d => d.depth === 0) as HierarchyDatum;

    this.computedWriter("topNode", this.topNode);

    this.data = d3Partition()(hierarchyData)
      .descendants()
      .filter(d => !isEmpty(d.data));

    this.checkDataValidity();

    this.computedWriter("data", this.data);
    return this.data;
  }