Hi,

I'm trying to change the color of the links, and it's not clear in the documentation how to do so.

 const methods = {
            links: this.state.nodes,
            nodes: this.state.links,
            color: (d: any) => d['color'],
            label: (d: any) => d['OccupationTitle'],
            hover: (d: any) =>  d['id'],
            zoom: true,
} 
   

Thanks

I installed the version 1.2.0 and that does not have the required packages. The src folder contains only D3PlusContext module, but not all the others (AreaPlot, BarChart and so on)

Expected Behavior

Install the library, import the modules as the documentation explains to make it work

Current Behavior

Install the library, import modul and get the error ERROR in ./node_modules/d3plus-react/es/index.js 1:0-53 Module not found: Error: Can't resolve './src/AreaPlot' in (the same for the other modules)

Steps to Reproduce (for bugs)

1. Install the library with npm install d3plus-react
2. Create an example component and import a d3plus-react module

Your Environment

• Browser Name: Chrome
• Operating System and Version: Ubuntu 20.04.5 LTS and macOS 12.6

Hi,

I'm trying to have a custom treemap tile with the name and the percentage like the stock one but I need to manually modify it because on the data that I have the IDs of the tiles aren't unique.

Here's my mocked dataset:

  const newData = [
    { parent: 'Group 1', id: 'alpha', value: 29 },
    { parent: 'Group 1', id: 'beta', value: 10 },
    { parent: 'Group 1', id: 'gamma', value: 2 },
    { parent: 'Group 2', id: 'alpha', value: 29 },
    { parent: 'Group 2', id: 'beta', value: 25 },
  ];

And here's my treemap config:

  const methods = {
    data: newData,
    groupBy: ['parent', 'id'],
    size: 'value',
    tooltipConfig: {
      title: (d) => `${d.parent} - <span>${d.name}</span>`,
    },
    shapeConfig: {
      label: (d) => {
        console.log(d);
        return [d.id, **_calculatedShareHere_**];
      },
    },
  };

How can I get the calculated share?

Hi, I'm using treemap in this package. It works well but after I hide the treemap, the tooltip doesn't hide. The .d3plus-tooltip is still there in the DOM.

Hi @davelandry,

I've been using d3plus-react extensively now; I like everything about it. It takes a couple of days to know all the names of the props you need. But, once you know them it's amazing.

So I tried to use the network graph, but for some reason, it only accepts this format for links (index of the node in the nodes array).

    const methods = {
      links:  [
        {source: 0, target: 1},
        {source: 0, target: 2},
        {source: 3, target: 4},
        {source: 3, target: 5},
        {source: 5, target: 0}
      ] ,
      nodes:  [
        {id:'alpha',   x: 1,   y: 1},
        {id:'beta',    x: 2,   y: 1},
        {id:'gamma',   x: 1,   y: 2},
        {id:'epsilon', x: 3,   y: 2},
        {id:'zeta',    x: 2.5, y: 1.5},
        {id:'theta',   x: 2,   y: 2}
      ],
    }

    let network = <Network config={methods} />

when I try to create the links based on the string value matching the id of the node, it just doesn't work.

    const methods = {
      links:  [
        {source: 'alpha', target: 'beta'},
        {source: 'alpha', target: 'gamma'},
        {source: 'epsilon', target: 'zeta'},
        {source: 'epsilon', target: 'theta'},
        {source: 'theta', target: 'alpha'}
      ] ,
      nodes:  [
        {id: 'alpha',   x: 1,   y: 1},
        {id: 'beta',    x: 2,   y: 1},
        {id: 'gamma',   x: 1,   y: 2},
        {id: 'epsilon', x: 3,   y: 2},
        {id: 'zeta',    x: 2.5, y: 1.5},
        {id: 'theta',   x: 2,   y: 2}
      ],
    }

    let network = <Network config={methods} />

Hi,

While changing the y-axis domain of a bar chart, bars are overlapping the x-axis. How can i avoid this?

Version: "d3plus-react": "1.0.1'
Reference: d3plus/d3plus#480

Hi everyone!

I'm creating a Treemap and I need to customize it. Following the documentation and making a few attempts, I was able to make all the changes that interested me, with the exception of handling the hover behavior.
I would need to create two separate custom behaviors for hovering over the chart and over the legend. Is this possible?

Up until now, I've tried modifying the hover and mouseenter methods, but to no avail.

Thanks a lot for your work.

Michela

Was trying to chase an issue down with some weird styling that broke after an upgrade. Looks like the CSS in the project was relying on having d3plus visualizations like <Geomap> get wrapped by default in a class with the name viz. But seems like that is no longer the default behavior.

Possible cause might be even though Viz.js sets defaultProps with className: "viz" it looks like other instances e.g. Geomap wipe that out by overwriting the default props on the class: Geomap.defaultProps = {type};

Hi,

Does d3plus-react currently include the ColorScale component? I tried to import it as a stand-alone component, but it didn't work.

Thanks.

First off , thank you for creating this for react. It's working great except for the tooltips which once they are opened remain open even when the page unloads for another screen.

I am using the GeoMap with points defined. When you hover over the point it displays some information and when you click on the point the user is navigated away from the page. The issue is the information displayed in the tool tip never disappears until you go back to the map and hover over another point.

Any ideas on how to fix this issue would be greatly appreciated since there doesn't not appear to be a handle to the svg objects anywhere.

const methods = {
//status: 0 good, 50 -out of range 100- critical
data: data
,
pointSizeMax: 5,
pointSizeMin: 1,

            // hides ColorScale, but still allows coloring shapes
            colorScalePosition: false,
            colorScale:"status",
            colorScaleConfig:{
                color: ["blue",  "green",  "red"],
            },
            groupBy:["label"],
            color:{
                value: "status"
            },

            label:(d)=> {
                return d.label  ;
            },

            legend: false,
            point:(d)=> {
                return [d.lon, d.lat];
            },on: {
                "click.shape": (d) => this.poolSelectHandler(d),
            },

        };

        geoGraph = <Geomap config={methods} /> ;

////
poolSelectHandler = (d) => {
this.props.onSetCompanyId(d.cId);
this.props.history.push( '/info/');
};

This is happening in all browsers, Chrome, Firefox and Safari on a Mac Desktop.

Version 0.5.11 of d3plus-plot just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As d3plus-plot is a direct dependency of this project this is very likely breaking your project right now. If other packages depend on you it’s very likely also breaking them.
I recommend you give this issue a very high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

The current README mentions the possibility of using a global .d3plus.js config file, but it seems this functionality was removed in favor of context based loading

Expected Behavior

Could be nice to have updated examples in the README of context providers

Hi Dave,

I tried to change links color using shapeConfig, but it didn't work

 shapeConfig: {
  Line: {
    stroke: "red"
  }
}

this is the full config obj

       const methods = {
            links: this.state.links,
            nodes: this.state.nodes,
            color: (d: any) => d['color'],
            label: (d: any) => d['OccupationTitle'],
            hover: (d: any) =>  d['id'],
            zoom: true,
            tooltipConfig: {
            title: (d: any) =>  d['OccupationTitle'] + '<br>',
            body: (d: any) => {
                let info: string = `<p>${d['sector']}</p>
                <li> Automation Risk: ${d['AutomationRisk']}</li>
                <li> Education Level: ${d['EducationLevel']}</li>
                `
                return info
           },
           shapeConfig: {
            Line: {
              stroke: "red"
              }
            }
          } 
        }  

But, if I changed the path stroke color in CSS, it will work. In my case, I want link color to be based on a function, so CSS will not work.

I noticed the one popular use case for D3Plus missing is the bubbles chart. In particular, the one in which you are able to drill down into individual nodes (nested hierarchy). This is my normal D3 implementation for example: http://selotec.io/prototype/react/#/map. Any plan on implementing something like this?

Hi,

I’m trying to add a search function to search the network nodes based on ids. Is there a way to activate a particular node to have a similar effect to "node click"?

I tried to trigger a click event on the selected node, but it didn't work.

active: d => {
     if(d['id'] === node) {
          let id = `d3plus-Shape d3plus-Circle d3plus-id-${d['id']}`
          let n = document.getElementsByClassName(id)
          n.click()
    }

I also tried this approach

let node = "914"
Network.config({
     active: d => {
         if(d['id'] === node) {
              return true
         }     
      return false               
     }
  }).render() 

Hi,

I tried to change the color of the y-axis, but for some reason is not passing the prop.

This's my code:

let methods = {
      data: this.state.dataset,
      x:'year',
      y:'publications',
      xConfig:{
        title:'Year',
      },
      yConfig:{
        title:'Publications',
      },
      yAxis: {
        barConfig: {
          stroke: '#ffffff'
        }
      },
      stacked: true,
    }

    let stackViz = false
    if (this.state.dataset && this.state.dataset.length > 1) {
      stackViz =  <BarChart config={methods} />
    }

Also, how can I pass a new range of colors? I tried a couple of ways, but it didn't work, and I didn't find any example that has a similar case.

Thanks :)!

First of all, thank you for making this technology available for free.
I would like to know if it is possible to create a click event and/or a mouseover event that changes the color of the selected element on the map. Here is the code for the events I have captured:

on: {
	mouseover: (d, i: any) => { console.log(d, i) },
	click: (d: any) => { filterTreemapData(d) }
}

I also provide the image, in this example I would like to color the states on the map above.

Thank you in advance.

Hi everyone. Thanks for developing and maintaining this package.

I'm encountering a strange error when trying to use d3plus-react in a Next.js project.
In particular I'm trying to use the GeoMap component.

Expected Behavior

Install d3plus-react, import GeoMap in custom component and use with custom data.

Current Behavior

The mere fact of importing the GeoMap throws a build-time error: SyntaxError: Unexpected token 'export'.

Steps to Reproduce (for bugs)

1. setup a Next.js v12 project
2. install d3plus-react
3. create a new component and import GeoMap from d3plus-react

Attachments

Here's a screenshot of the error

Here's my component's code

import { useEffect, useState } from "react";

import { Geomap } from "d3plus-react";

import { getJSON } from "../utils";

const PointMap = ({ dataApiUrl }) => {

  const [data, setData] = useState(null);

  useEffect(() => {
    getJSON(dataApiUrl)
      .then(res => setData(res))
      .catch(console.error);
  }, []);

  return (
    data &&
    <Geomap
      className="pointmap"
      config={{
        zoom: true,
        ocean: '#fff',
        legend: false,
        data: data,
        groupBy: 'city',
        label: d => d.city,
        point: d => [d.longitude, d.latitude],
        pointSize: d => d.value,
        pointSizeMin: 1,
        projection: 'geoMercator',
        tiles: true,
        tilesUrl: 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}@2x.png',
        attribution: false
      }}
    />
  );
};

export default PointMap;

Your Environment

• Browser Name: Chrome 98 / Firefox 97
• Operating System and Version: Ubuntu 20.04.2 LTS
• package versions:

"d3plus-react": "^1.1.1",
"next": "12.0.10",
"react": "17.0.2",
"react-dom": "17.0.2"

Let me know you I can provide any other information. Thanks a lot.
Francesco

Hello guys I'm a noob in d3plus-react. I only want to display a lineplot in my App.js using but I have this bug TypeError: Cannot read property '__transition' of undefined. I'm using Google Chrome and Mac Os X.
:

Chart Component :

import React from 'react';
import './.d3plus';
import "../node_modules/d3";
import { LinePlot } from "d3plus-react";


class Chart extends React.Component {
    state = {
        data: [
            {"year": 1991, "name":"alpha", "value": 17},
            {"year": 1992, "name":"alpha", "value": 20},
            {"year": 1993, "name":"alpha", "value": 25},
            {"year": 1994, "name":"alpha", "value": 33},
            {"year": 1995, "name":"alpha", "value": 52},
            {"year": 1991, "name":"beta", "value": 36},
            {"year": 1992, "name":"beta", "value": 32},
            {"year": 1993, "name":"beta", "value": 40},
            {"year": 1994, "name":"beta", "value": 58},
            {"year": 1995, "name":"beta", "value": 13},
            {"year": 1991, "name":"gamma", "value": 24},
            {"year": 1992, "name":"gamma", "value": 27},
            {"year": 1994, "name":"gamma", "value": 35},
            {"year": 1995, "name":"gamma", "value": 40}
        ]
    };
    render () {
        const {data} = this.state;
        const config = {
            data,
            x: "year",
            y: "value",
            text: "name"
        };
        return (
            <div>
                <h1>Progreso: </h1>
            <div>
            <LinePlot config={{ config }} />
            </div>
            </div>
        );
    }
}

export default Chart;

App.js :

class App extends React.Component {
    render() {
        return (
            <div className="App">
                <Router>
                    <div>
                        <Breadcrumbs mappedRoutes={routes} />
                        <switch>
                            <Route exact path="/" component={Login}/>
                            <Route exact path="/welcome" component={Welcome}/>
                            <Route exact path="/welcome/ficha" component={Ficha}/>
                            <Route exact path="/welcome/horario" component={Horario}/>
                            <Route exact path="/welcome/progreso" component={Chart}/>
                        </switch>
                    </div>
                </Router>
            </div>

        );
    }
}

First let me start by thanking you for creating this amazing package. Literally the best data visualization package for react!

I am trying to add some styling to the legend, like increasing the font size, font family, add margins, font-weight, borders . Would this be done with d3plus-react?

I been able to do add some style with CSS but I don't think is the right way to do it. Also how can I do the same for the tooltips. I been using the docs in d3plus.org but haven't been able to find it.

Thanks!

dependent on d3plus/d3plus-viz#168

Hi @davelandry

I was trying to create a grouped horizontal bar chart, and I wanted my x-axis to be on top as a log scale.

There are two issues; first, the axises overlaps not sure if there's a way to add padding using the react wrapper. Second, since I have a different number of bars in each year, the group padding is not efficient with all cases and as you can see it makes the bars super tiny. Is there a way where I can fix this problem?

let methods = {
      data: this.state.dataset,
      discrete: 'y',
      x: 'citations',
      y: 'year',
      xConfig:{
        orient: 'top',
        scale: 'log',
        title: 'Citations',
        titleConfig: {
          fontColor: '#fff',
          font: 'Open Sans'
        },
        barConfig: {
          stroke: 'transparent',
        },
        shapeConfig: {
          labelConfig: {
            fontColor: '#fff',
            font: 'Open Sans'
          },
          stroke: '#fff'
        },
        gridConfig: {
          stroke: '#transparent',
        }
      },
      yConfig: {
        title:'Year',
        titleConfig: {
          fontColor: '#fff',
          font: 'Open Sans'
        },
        barConfig: {
          stroke: '#ffffff'
        },
        shapeConfig: {
          labelConfig: {
            fontColor: '#fff',
            font: 'Open Sans'
          },
          stroke: '#fff'
        },
        gridConfig: {
          stroke: 'transparent'
        }
      },
      legend: false,
      shapeConfig: {
        fill: d => colorScale(d.year),
        fontFamily: 'Open Sans'
      }
    }

      timeLine = <BarChart config={methods} />

Thanks!!