react-d3-library / react-d3-library Goto Github PK

import React, { useEffect, useRef } from "react";
import * as d3 from "d3";
import { CardBody, Card, CardHeader } from "reactstrap";

const BubbleChartD3Test = ({ data }) => {
  const el = useRef();
  console.log(data);

  function createSvg() {
    return d3
      .select(el.current)
      .append("svg")
      .attr("width", 500)
      .attr("height", 500);
  }
  function drawChart(svg) {
    let hierachalData = makeHierarchy(data);
    let packLayout = pack([400 - 10, 400 - 10]);
    const root = packLayout(hierachalData);

    const leaf = svg
      .selectAll("g")
      .data(root.leaves())
      .join("g")
      .attr("transform", (d) => `translate(${d.x + 1},${d.y + 1})`);

    leaf
      .append("circle")
      .attr("r", (d) => d.r)
      .attr("fill-opacity", 0.7)
      .attr("fill", "navy");

    leaf
      .append("text")
      .attr("dy", ".2em")
      .style("text-anchor", "middle")
      .text(function (d) {
        return d.data["Screen Name"];
      })
      .attr("font-family", "sans-serif")
      .attr("font-size", function (d) {
        return d.r / 5;
      })
      .attr("fill", "white");

    leaf.append("title").text(function (d) {
      return d.data["Screen Name"] + ": " + d.data["تعداد توییت"];
    });
  }

  function pack(size) {
    return d3.pack().size(size).padding(3);
  }

  function makeHierarchy() {
    return d3.hierarchy({ children: data }).sum((d) => d["تعداد توییت"]);
  }

  useEffect(() => {
    let svg = createSvg();
    drawChart(svg);
  }, [data]);

  return (
    <Card>
      <CardHeader>
        {" "}
        <h2>bubble chart</h2>
      </CardHeader>
      <CardBody>
        {" "}
        <div id="bubblechart" ref={el}></div>
      </CardBody>
    </Card>
  );
};

export default BubbleChartD3Test;

[Screen Name: "h_javanmarrd13"
تعداد توییت: 1]

warning.js:36 Warning: Unknown props `__data__`, `__onmouseover`, `__onmouseout` on <line> tag. Remove these props from the element.

const node = document.createElement('div');
const svg = d3.select(node).append('svg');
svg.append('text').text('Hello d3');

Warning: React does not recognize the `textContent` prop on a DOM element. If you intentionally 
want it to appear in the DOM as a custom attribute, spell it as lowercase `textcontent` instead. If you 
accidentally passed it from a parent component, remove it from the DOM element.
in text
in svg
in div
in div
in childComponent
in div
...

     const force = d3.layout.force() // (App.js:311)
    .charge(-120)
    .linkDistance(50)
    .size([width, height])
    .nodes(data.nodes)
    .links(data.links);

import d3 from 'd3';
import rd3 from 'react-d3-library';
const RD3Component = rd3.Component(d3);

// import d3 from 'd3';
import rd3 from 'react-d3-library';
// ... omitted for brevity
const d3 = window.d3; // explicitly get d3 from window.

import * as d3 from 'd3'
const svg = d3.select(element)
			.append("svg")
				.attr("width", 500)
				.attr("height", 500)

var BarChart = require('react-d3-library').BarChart;
...
        var values = [];
        for (var i = 0; i < hourly.length; i++) {
            values.push({"x": hourly[i].DESCRIP, "y": hourly[i].DYES});
        }
        var barData = [
          { 
            "label": "Hourly Series",
            'dataSet': values
          }
        ];
...
                        <BarChart
                            data={barData}
                            height={200}
                            width={300}
                        />

var drag = force.drag()
    .on("dragstart", dragstarted)
    .on("drag", dragged)
    .on("dragend", dragended);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var nodes = force.nodes(),
    links = force.links();

var node = svg.selectAll(".node"),
    link = svg.selectAll(".link");

restart();

function tick() {
    link.attr("x1", function (d) {
        return d.source.x = Math.max(radius, Math.min(width - radius, d.source.x));
    })
        .attr("y1", function (d) {
            return d.source.y = Math.max(radius, Math.min(height - radius, d.source.y));
        })
        .attr("x2", function (d) {
            return d.target.x = Math.max(radius, Math.min(width - radius, d.target.x));
        })
        .attr("y2", function (d) {
            return d.target.y = Math.max(radius, Math.min(height - radius, d.target.y));
        });

    node.attr("cx", function (d) {
        return d.x = Math.max(radius, Math.min(width - radius, d.x));
    })
        .attr("cy", function (d) {
            return d.y = Math.max(radius, Math.min(height - radius, d.y));
        });
}

function restart() {
    node = node.data(nodes);
    node.enter().insert("circle")
        .attr("class", "node")                    // Changes class to node
        .attr("r", radius)                             // Sets radius of node
        .call(drag);
    node.exit()                                   // Nodes to remove
        .remove();                                // Remove nodes
    link = link.data(links);
    link.enter().insert("line", ".node")
        .attr("class", "link");
    link.exit()
        .remove();
    force.start();
}

function dragstarted(d) {
    if (!d3.event.active) {
        d.fx = d.x;
        d.fy = d.y;
    }
}

function dragged(d) {
    d.fx = d3.event.x;
    d.fy = d3.event.y;
}

function dragended(d) {
    // d3.select(this).classed("fixed", d.fixed = true);    // This fixes node in position - may add later
    if (!d3.event.active) {
        d.fx = null;
        d.fy = null;
    }
}

function get_json(d) {
        inf_list = JSON.parse(d).inf_list;
}

svg.on("mount", function(){
    this.infect_start = this.infect_start.bind(this);
});

function infect_start() {
        console.log('Started Infection');
        // Send call to backend to start infection
        alive = true;
        $.ajax({
            type: "POST",
            url: url.concat("init"),
            data: JSON.stringify([{"action": 'INITIALISE'}]),
            success: get_json,
            async: false
        });

        node.filter(function (d) {
            return inf_list.includes(d.id);
        })
        .style('fill', 'red');
        d3.event.preventDefault();
}

constructor(props){
    super(props)
    this.state = {
        isDropdown1Open: false,
        isDropdown2Open: false,
        isControlsOpen: true,
        isTooltip1Open: false,
        isTooltip2Open: false,
        isTooltip3Open: false,
        isTooltip4Open: false
    };
    this.toggleDropdown1 = this.toggleDropdown1.bind(this);
    this.toggleDropdown2 = this.toggleDropdown2.bind(this);
    this.toggleControls = this.toggleControls.bind(this);
    this.toggleTooltip1 = this.toggleTooltip1.bind(this);
    this.toggleTooltip2 = this.toggleTooltip2.bind(this);
    this.toggleTooltip3 = this.toggleTooltip3.bind(this);
    this.toggleTooltip4 = this.toggleTooltip4.bind(this);
};

toggleDropdown1(){
    this.setState({
        isDropdown1Open: !this.state.isDropdown1Open
    });
}

toggleDropdown2(){
    this.setState({
        isDropdown2Open: !this.state.isDropdown2Open
    });
}

toggleControls(){
    this.setState({
       isControlsOpen: !this.state.isControlsOpen
    });
}

toggleTooltip1(){
    this.setState({
        isTooltip1Open: !this.state.isTooltip1Open
    });
}

toggleTooltip2(){
    this.setState({
        isTooltip2Open: !this.state.isTooltip2Open
    });
}

toggleTooltip3(){
    this.setState({
        isTooltip3Open: !this.state.isTooltip3Open
    });
}

toggleTooltip4(){
    this.setState({
        isTooltip4Open: !this.state.isTooltip4Open
    });
}


render() {
  return(
      <Navbar className="navbar wrapper float-left pl-0" id="sidebar">
        <div className="row">
              <Button className="fa fa-bars" id="controlToggler" onClick={this.toggleControls}/>
        </div>
        <div className="container ml-0 pl-0 float-left align-center" id="controls">
          <Collapse isOpen={this.state.isControlsOpen}>
              <ButtonGroup vertical className="float-left ml-0 pl-0">
                  <Button variant="outline-light" size="sm" className="fa fa-play" id="playButton" onClick={infect_start}></Button>
                  <Tooltip placement="right" target="playButton" isOpen={this.state.isTooltip1Open} toggle={this.toggleTooltip1} delay={{show: 1250, hide: 0}}>
                      Start
                  </Tooltip>
                  <Button variant="outline-light" size="sm" className="fa fa-repeat" id="resetButton"></Button>
                  <Tooltip placement="right" target="resetButton" isOpen={this.state.isTooltip2Open} toggle={this.toggleTooltip2} delay={{show: 1250, hide: 0}}>
                      Reset
                  </Tooltip>
                  <Button variant="outline-light" size="sm" className="fa fa-compress" id="hold-releaseButton"></Button>
                  <Tooltip placement="right" target="hold-releaseButton" isOpen={this.state.isTooltip3Open} toggle={this.toggleTooltip3} delay={{show: 1250, hide: 0}}>
                      Hold/Release
                  </Tooltip>
                  <Button variant="outline-light" size="sm" className="fa fa-times" id="noActionButton"></Button>
                  <Tooltip placement="right" target="noActionButton" isOpen={this.state.isTooltip4Open} toggle={this.toggleTooltip4} delay={{show: 1250, hide: 0}}>
                      No Action
                  </Tooltip>

                  <ButtonDropdown id="difficultyDropdown" isOpen={this.state.isDropdown1Open} toggle={this.toggleDropdown1} className="mt-4" id="difficultyButton">
                      <DropdownToggle caret className="verticalText">
                          Difficulty
                      </DropdownToggle>
                      <DropdownMenu className="w-auto">
                          <DropdownItem className="border-bottom">Easy</DropdownItem>
                          <DropdownItem className="border-bottom">Medium</DropdownItem>
                          <DropdownItem>Hard</DropdownItem>
                      </DropdownMenu>
                  </ButtonDropdown>

                  <ButtonDropdown id="speedDropdown" isOpen={this.state.isDropdown2Open} toggle={this.toggleDropdown2} className="mt-5" id="speedButton">
                      <DropdownToggle caret className="verticalText">
                          Speed
                      </DropdownToggle>
                      <DropdownMenu>
                          <DropdownItem className="border-bottom">Wait</DropdownItem>
                          <DropdownItem className="border-bottom">Slow</DropdownItem>
                          <DropdownItem className="border-bottom">Medium</DropdownItem>
                          <DropdownItem>Fast</DropdownItem>
                      </DropdownMenu>
                  </ButtonDropdown>
              </ButtonGroup>
          </Collapse>
        </div>
      </Navbar>
  );
};

import React from 'react';
import rd3 from 'react-d3-library';
const LineChart = rd3.LineChart;

class DGraph extends React.Component {
  render() {
    const dataObj = {};
    dataObj.dataset = [
      {time: '24-Apr-07', value: 93.24},
      {time: '25-Apr-07', value: 95.35 },
      {time: '26-Apr-07', value: 98.84 },
      {time: '27-Apr-07', value: 99.92 },
      {time: '28-Apr-07', value: 99.80 }
    ];
    dataObj.height = 350;
    dataObj.width = 750;
    dataObj.margins = {top: 20, right: 10, bottom: 0, left: 10};

    return (
      <div>
        <h1>D3 Graph</h1>
        <LineChart data={dataObj}/>
      </div>
    );
  }
}

export default DGraph;