I'm trying to implement this D3 code into an empty react project but the graphic is not showing on the browser. I've tried this below code. I also installed D3 version 3 using npm i d3#3
When I just try implement using vanilla html and vanilla JS, it still doesn't work on the local browser. I'm not sure why it's not working. The author's deployed project seem to work well.
import React from "react";
import * as d3 from "d3";
class Aroma extends React.Component {
componentDidMount(){
var margin = {top: 650, right: 650, bottom: 650, left: 650},
radius = Math.min(margin.top, margin.right, margin.bottom, margin.left) - 168;
function filter_min_arc_size_text(d, i) {return (d.dx*d.depth*radius/1)>14};
var hue = d3.scale.category10();
var luminance = d3.scale.sqrt()
.domain([0, 1e6])
.clamp(true)
.range([80, 20]);
var svg = d3.select("body").append("svg")
.attr("width", margin.left + margin.right)
.attr("height", margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var partition = d3.layout.partition()
.sort(function(a, b) { return d3.ascending(a.name, b.name); })
.size([2 * Math.PI, radius]);
var arc = d3.svg.arc()
.startAngle(function(d) { return d.x; })
.endAngle(function(d) { return d.x + d.dx - .01 / (d.depth + .5); })
.innerRadius(function(d) { return (radius + 6) / 3 * d.depth; })
.outerRadius(function(d) { return (radius + 6) / 3 * (d.depth + 1.) - 1; });
svg.append("image")
.attr("xlink:href", "images/grapes.png")
.attr("x", -650)
.attr("y", -650);
//Tooltip description
var tooltip = d3.select("body")
.append("div")
.attr("id", "tooltip")
.style("position", "absolute")
.style("z-index", "10")
.style("opacity", 0);
function format_number(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
function format_description(d) {
var description = d.description;
return '<b>' + d.name + '</b></br>'+ d.description + '<br> (' + format_number(d.value) + ')';
}
function computeTextRotation(d) {
var rotation = (d.x + d.dx / 2) * 180 / Math.PI - 90;
return {
global: rotation,
correction: rotation > 90 ? 180 : 0
};
}
function isRotated(d) {
var rotation = (d.x + d.dx / 2) * 180 / Math.PI - 90;
return rotation > 90 ? true : false
}
function mouseOverArc(d) {
d3.select(this).attr("stroke","black")
tooltip.html(format_description(d));
return tooltip.transition()
.duration(50)
.style("opacity", 0.9);
}
function mouseOutArc(){
d3.select(this).attr("stroke","")
return tooltip.style("opacity", 0);
}
function mouseMoveArc (d) {
return tooltip
.style("top", (d3.event.pageY-10)+"px")
.style("left", (d3.event.pageX+10)+"px");
}
var root_ = null;
d3.json("data/davis-aroma-wheel.json", function(error, root) {
if (error) return console.warn(error);
// Compute the initial layout on the entire tree to sum sizes.
// Also compute the full name and fill color for each node,
// and stash the children so they can be restored as we descend.
partition
.value(function(d) { return d.size; })
.nodes(root)
.forEach(function(d) {
d._children = d.children;
d.sum = d.value;
d.key = key(d);
d.fill = fill(d);
});
// Now redefine the value function to use the previously-computed sum.
partition
.children(function(d, depth) { return depth < 3 ? d._children : null; })
.value(function(d) { return d.sum; });
var center = svg.append("circle")
.attr("r", radius / 3)
.on("click", zoomOut);
center.append("title")
.text("Zoom Out");
var partitioned_data = partition.nodes(root).slice(1)
var path = svg.selectAll("path")
.data(partitioned_data)
.enter().append("path")
.attr("d", arc)
.style("fill", function(d) { return d.fill; })
.each(function(d) { this._current = updateArc(d); })
.on("click", zoomIn)
.on("mouseover", mouseOverArc)
.on("mousemove", mouseMoveArc)
.on("mouseout", mouseOutArc);
var texts = svg.selectAll("text")
.data(partitioned_data)
.enter().append("text")
.filter(filter_min_arc_size_text)
.attr("transform", function(d)
{
var r = computeTextRotation(d);
return "rotate(" + r.global + ")"
+ "translate(" + radius / 3. * d.depth + ")"
+ "rotate(" + -r.correction + ")";
})
.style("font-weight", "bold")
.style("text-anchor", "middle")
.attr("dx", function(d) {return isRotated(d) ? "-85" : "85"}) //margin
.attr("dy", ".35em") // vertical-align
.on("click", zoomIn)
.text(function(d,i) {return d.name})
function zoomIn(p) {
if (p.depth > 1) p = p.parent;
if (!p.children) return;
zoom(p, p);
}
function zoomOut(p) {
if (!p.parent) return;
zoom(p.parent, p);
}
// Zoom to the specified new root.
function zoom(root, p) {
if (document.documentElement.__transition__) return;
// Rescale outside angles to match the new layout.
var enterArc,
exitArc,
outsideAngle = d3.scale.linear().domain([0, 2 * Math.PI]);
function insideArc(d) {
return p.key > d.key
? {depth: d.depth - 1, x: 0, dx: 0} : p.key < d.key
? {depth: d.depth - 1, x: 2 * Math.PI, dx: 0}
: {depth: 0, x: 0, dx: 2 * Math.PI};
}
function outsideArc(d) {
return {depth: d.depth + 1, x: outsideAngle(d.x), dx: outsideAngle(d.x + d.dx) - outsideAngle(d.x)};
}
center.datum(root);
// When zooming in, arcs enter from the outside and exit to the inside.
// Entering outside arcs start from the old layout.
//commented //if (root === p) enterArc = outsideArc, exitArc = insideArc, outsideAngle.range([p.x, p.x + p.dx]);
var new_data=partition.nodes(root).slice(1)
path = path.data(new_data, function(d) { return d.key; });
// When zooming out, arcs enter from the inside and exit to the outside.
// Exiting outside arcs transition to the new layout.
//commented// if (root !== p) enterArc = insideArc, exitArc = outsideArc, outsideAngle.range([p.x, p.x + p.dx]);
d3.transition().duration(d3.event.altKey ? 7500 : 750).each(function() {
path.exit().transition()
.style("fill-opacity", function(d) { return d.depth === 1 + (root === p) ? 1 : 0; })
.attrTween("d", function(d) { return arcTween.call(this, exitArc(d)); })
.remove();
path.enter().append("path")
.style("fill-opacity", function(d) { return d.depth === 2 - (root === p) ? 1 : 0; })
.style("fill", function(d) { return d.fill; })
.on("click", zoomIn)
.on("mouseover", mouseOverArc)
.on("mousemove", mouseMoveArc)
.on("mouseout", mouseOutArc)
.each(function(d) { this._current = enterArc(d); });
path.transition()
.style("fill-opacity", 1)
.attrTween("d", function(d) { return arcTween.call(this, updateArc(d)); });
});
texts = texts.data(new_data, function(d) { return d.key; })
texts.exit()
.remove()
texts.enter()
.append("text")
texts.style("opacity", 0)
.attr("transform", function(d) {
var r = computeTextRotation(d);
return "rotate(" + r.global + ")"
+ "translate(" + radius / 3 * d.depth + ",0)"
+ "rotate(" + -r.correction + ")";
})
.style("font-weight", "bold")
.style("text-anchor", "middle")
.attr("dx", function(d) {return isRotated(d) ? "-85" : "85"}) //margin
.attr("dy", ".35em") // vertical-align
.filter(filter_min_arc_size_text)
.on("click", zoomIn)
.text(function(d,i) {return d.name})
.transition().delay(750).style("opacity", 1)
}
});
function key(d) {
var k = [], p = d;
//while (p.depth) k.push(p.name), p = p.parent;
return k.reverse().join(".");
}
function fill(d) {
var p = d;
while (p.depth > 1) p = p.parent;
var c = d3.lab(hue(p.name));
c.l = luminance(d.sum);
return c;
}
function arcTween(b) {
var i = d3.interpolate(this._current, b);
this._current = i(0);
return function(t) {
return arc(i(t));
};
}
function updateArc(d) {
return {depth: d.depth, x: d.x, dx: d.dx};
}
d3.select(this.frameElement).style("height", margin.top + margin.bottom + "px");
}
render(){
return <p id="aroma" />;
}
}
export default Aroma;
I emailed the original D3 repo author and he kindly got back to me, mentioning that there's an error with d3 version 3, that it needs longer investigation. He sent me all the resources that he used to build his project 3 years ago.
So I simply decided to follow this action.
Zoomable sunburst chart shows only two layers of the hierarchy at a time in React JS
how to specify the position of next note to be added
i tried with following code but it is generating randomly even over the previous note .but the next note should not be on the position of previous note.
randomBetween: function (min, max) {
return min + Math.ceil(Math.random() * max);
},
componentWillMount: function () {
this.style = {
right: this.randomBetween(0, window.innerWidth - 150) + 'px',
top: this.randomBetween(0, window.innerHeight - 150) + 'px',
transform: 'rotate(' + this.randomBetween(-15, 15) + 'deg)' };
},
I have input type as file.I am defining onMouseDown function for it.In order,change the position of file preview.I am getting the follwing error:
TypeError: Cannot set property 'left' of undefined
<input
type="file"
className="file"
id="file-browser-input"
name="file-browser-input"
ref ={input=>this.fileInput=input}
onDragOver={(e)=>{
e.preventDefault();
e.stopPropagation();
}
}
onDrop={this.onFileLoad.bind(this)
onChange={this.onFileLoad.bind(this)}
onMouseDown={this.catchItem.bind(this)}
/>
catchItem(e) {
this.style.left = e.pageX - this.clientWidth / 2 + "px";
this.style.top = e.pageY - this.clientHeight / 2 + "px";
this.onmousemove = function(e) {
this.style.left = e.pageX - this.clientWidth / 2 + "px";
this.style.top = e.pageY - this.clientHeight / 2 + "px";
}
this.onmouseup = function() {
this.onmousemove = null; // onmouseup event [ redirect mousemove event signal to null instead of the
drag-able element]
}
}
Seems like this.style is undefined
catchItem(e) {
this.style.left = e.pageX - this.clientWidth / 2 + "px"; // either this one
this.style.top = e.pageY - this.clientHeight / 2 + "px";
this.onmousemove = function(e) {
this.style.left = e.pageX - this.clientWidth / 2 + "px"; // or this one
this.style.top = e.pageY - this.clientHeight / 2 + "px";
}
...
}
Since you don't bind this.onmousemove's context to the class' context, I suspect it to be the second one.
Any reason you're not using arrow functions in this case?
fix:
catchItem(e) {
this.onmousemove = (e) => {
...
}
or
this.onmousemove = function(e){
...
}
this.onmousemove.bind(this);
}
I used a react-konva Group with 3 Rect shapes inside it - they are all displayed at the same place and the only difference is their width so i can get some sort of a multi-color process bar.
This is my current code:
import React from 'react';
import {Group, Rect, Text} from 'react-konva';
import Konva from 'konva'
export function functionalTaskContainer(properties) {
function handleDragStart(e, properties) {
e.target.setAttrs({
width: ((Math.ceil(properties.length / 5)) * properties.cellWidth) - 10,
shadowOffset: {
x: 15,
y: 15
},
scaleX: 1.1,
scaleY: 1.1
});
}
function findWhereToLand(x, firstCellWidth, cellWidth) {
let cell = 0;
while (x > firstCellWidth + cell * cellWidth) {
cell++;
}
return cell;
}
function handleDragMove(e, properties) {
e.target.children.forEach((child) => {
if (child.className === "Rect") {
switch (child.getAttr("name").split(' ')[0]) {
case "mainRect":
child.to({
duration: 0.01,
width: ((Math.ceil(properties.length / 5)) * properties.cellWidth) - 10
});
break;
case "workingRect":
child.to({
duration: 0.01,
width: ((Math.ceil(properties.length / 5) * properties.cellWidth) - 10) * (properties.percentageDone + properties.percentageWorking)
});
break;
case "doneRect":
child.to({
duration: 0.01,
width: ((Math.ceil(properties.length / 5) * properties.cellWidth) - 10) * properties.percentageDone
});
break;
default:
break;
}
}
});
e.target.setAttrs({
y: (properties.row + 1) * properties.cellHeight
});
}
function handleDragEnd(e, properties) {
console.log(e);
properties.changeWeekHandler(findWhereToLand(e.target.attrs.x, properties.firstCellWidth, properties.cellWidth));
e.target.to({
duration: 0.05,
easing: Konva.Easings.EaseIn,
scaleX: 1,
scaleY: 1,
shadowOffsetX: 5,
shadowOffsetY: 5
});
}
return (
<Group
key={"container-" + properties.row}
x={properties.col > 0 ? (properties.firstCellWidth + (properties.col - 1) * properties.cellWidth) : 0}
y={(properties.row + 1) * properties.cellHeight}
draggable={properties.draggable || false}
onDragStart={(e) => handleDragStart(e, properties)}
onDragMove={(e) => handleDragMove(e, properties)}
onDragEnd={(e) => handleDragEnd(e, properties)}>
<Rect
name={"mainRect of " + properties.row}
x={5}
y={5}
width={properties.col === 0 ? properties.firstCellWidth - 10 : ((Math.ceil(properties.length / 5)) * properties.cellWidth) - 10}
height={properties.cellHeight - 10}
fill="#5BC0EB"
shadowBlur={10}
cornerRadius={5}
/>{/* blue general block*/}
<Rect
name={"workingRect of " + properties.row}
x={5}
y={5}
width={(properties.col === 0 ? properties.firstCellWidth - 10 : ((Math.ceil(properties.length / 5)) * properties.cellWidth) - 10) * (properties.percentageDone + properties.percentageWorking)}
height={properties.cellHeight - 10}
fill="#FDE74C"
cornerRadius={5}
/>{/* yellow working progress*/}
<Rect
name={"doneRect of " + properties.row}
x={5}
y={5}
width={(properties.col === 0 ? properties.firstCellWidth - 10 : ((Math.ceil(properties.length / 5)) * properties.cellWidth) - 10) * properties.percentageDone}
height={properties.cellHeight - 10}
fill="#9BC53D"
cornerRadius={5}
/>{/* green done progress*/}
<Text
x={15}
y={15}
text={properties.containerName}
fill={"white"}
fontFamily={'david'}
fontStyle={'bold'}
shadowBlur={5}
fontSize={20}
/>
</Group>
)
}
For dragging events I would find it way more simple to set a single attribute to the group object and then use it when constructing the sub Shapes. But I can't find the syntax to do that.
what I am trying to do is something like:
<Group
key={"container-" + properties.row}
width={SomeValue}
x={properties.col > 0 ? (properties.firstCellWidth + (properties.col - 1) * properties.cellWidth) : 0}
y={(properties.row + 1) * properties.cellHeight}
draggable={properties.draggable || false}
onDragStart={(e) => handleDragStart(e, properties)}
onDragMove={(e) => handleDragMove(e, properties)}
onDragEnd={(e) => handleDragEnd(e, properties)}>
<Rect
name={"mainRect of " + properties.row}
x={5}
y={5}
width={properties.col === 0 ? properties.firstCellWidth - 10 : this.parent.getAttr("width") - 10}
height={properties.cellHeight - 10}
fill="#5BC0EB"
shadowBlur={10}
cornerRadius={5}
/>{/* blue general block*/}
</Group>
Is there a way to do?
Here I am trying to move a touchable element by changing "top" and "left" values as can be seen below. The problem is, for "(number > 4)" it doesn't work as it should. To add to this, only "top" value change has an effect on the element, whereas change in "left" has no effect. I am clueless here, please help
Move function:
moveTo(index, number, onMoveFinish) {
const x = index % 9;
const y = (index - x) / 9;
const gap = 2;
var left = CellSize * x - gap
var top = CellSize * (y - 9) - CellSize - gap
if(number > 4){
left = (BoardWidth / 9 * (number + 1) + (BoardWidth / 9 - CellSize) / 2)
top = top - ((2 + CellSize * 1.1) + (CellSize / 3))
}
LayoutAnimation.configureNext(spring);
this.setState({ left, top });
setTimeout(() => {
onMoveFinish && onMoveFinish();
}, 25000);
}
Render function:
render() {
if (this.state.hide) return null;
const { number } = this.props;
var { left, top } = this.state;
if(number > 4){
top = top + ((2 + CellSize * 1.1) + (CellSize / 3))
left = (BoardWidth - (CellSize * 4.4 + ((CellSize / 3) * 3) + 16)) / 2 +
(number - 5) * ((CellSize / 3) + (CellSize * 1.1))
}
return (
<Touchable onPress={this.onPress} style={[styles.container, {top, left}]} >
<View style={styles.cell} >
<Text style={styles.text}>{number + 1}</Text>
</View>
</Touchable>
);
}
}
Style:
const styles = StyleSheet.create({
container: {
position: 'absolute',
width: CellSize,
height: CellSize,
},
cell: {
width: CellSize * 1.1,
height: CellSize * 1.1,
backgroundColor: 'transparent',
alignItems: 'center',
justifyContent: 'center',
},
});