Overwrite default value from property panel
Hello everyone, I have a custom visual where user can drag the horizontal line which change the column width. Default value is set to 125. I try to figure out how to ovewrite the default value from property panel like this: I did try to overwite the value this way: this.settings.columnProps.column_one = currentLines[0].getBoundingClientRect().left; ... but it doesn't work. When refresh the report the value back to default. Is there any API or ready solution to do this ? Can I use come kind of local storage ? Thanks for any help!Multi parent hierarchy - custom visual D3.js
Hello Guys ! I create hierarchy table and what I want to achieve is something like this below: I know how to build hierarchy level for two categories and draw it, but I have a problem with 3 or more categories. My dataset is flat array of objects. Every object has id and parentId. I'm using d3.stratify() to make hierarchy nodes. It works properly but once I add third category which has two or more parents it crush. I found somewhere that hierarchy where children have many parents is not hierarchy anymore but graph. Is it right ? This is my stratify function: const root = d3 .stratify() .id(function (d: any) { return d.name; }) .parentId(function (d: any) { return d.parentId; })(items); This is my dataset transform when there is 3 categories: yAxis.map((d, i) => { if (yAxis.length === 3) { if (i === 2) { const children = data.filter( (d) => d.name === d.yAxis[d.yAxis.length - 1] ); uniqArray.push(children); } else if (i === 1) { const children = data.filter((d) => d.name === d.yAxis[1]); const filteredChildren = children.filter(function (a) { var key = a.name + "|" + a.parentName; if (!this[key]) { this[key] = true; return true; } }, Object.create(null)); uniqArray.push(filteredChildren); } else { const children = data.filter((d) => !d.parentId); uniqArray.push(_.uniqBy(children, (d) => d.name)); } return [..._.flatten(uniqArray), { name: "root" }]; } }); return yAxis.length > 1 ? [..._.flatten(uniqArray), { name: "root" }] : [...data, { name: "root" }]; Did you ever face that problem ? Or maybe you have some solution. I will be grateful for any advice how to do this. Thanks!
D3.JSON can´t do it work!
Hi! I am trying to bring data from API using d3.json, it works fine but I do not know how to take this info to place it in an element. This is the code to bring data from API (works fine) Var datos = d3.json("https://pokeapi.co/api/v2/pokemon/ditto") .then( data=> console.log(data)); But I cant not get access to the info from an element this.rect .data(datos) // it gives an error receiving "datos" .attr("x", "100") .attr("y", "100") .attr("width", 30) .attr("height", "300") .attr("fill", "red"); What am I missing? Is it possible to get it work? I watched how to do it outside Power BI Thanks in advance for your help!
d3.js hover tooltips not rendering in Power BI
I have a scatterplot I've build using d3. I've gotten the tooltips to work just fine when testing in-browser, but when built the same d3 visualization in power bi, but I can't seem to get the tooltips to render when mousing over a point? Has anyone else had this issue, or has this been documented with power bi elsewhere? Thanks in advance. The example I built this off from is here: https://www.d3-graph-gallery.com/graph/scatter_basic.html var margin = {top: 10, right: 30, bottom: 30, left: 80}, width = pbi.width - margin.left - margin.right, height = pbi.height - margin.top - margin.bottom; // ALTER: Replaced the d3.tsv function with the pbi variant: pbi.dsv pbi.dsv(function(letters) { var svg = d3.select("#chart") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // Add the tooltip container to the vis container // it's invisible and its position/contents are defined during mouseover var tooltip = d3.select("#chart").append("div") .attr("class", "tooltip") .style("opacity", 0); var x = d3.scale.linear() .domain([0, 4000]) .range([0, width]); var y = d3.scale.linear() .domain([0, 500000]) .range([height, 0]); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(d3.svg.axis().scale(x).orient("bottom")); svg.append("g") .attr("class", "y axis") .call(d3.svg.axis().scale(y).orient("left")); svg.append('g') .selectAll("dot") .data(letters) .enter() .append("circle") .attr("cx", function (d) { return x(d.grlivarea); } ) .attr("cy", function (d) { return y(d.saleprice); } ) .attr("r", 1.5) .style("fill", "#69b3a2") .on("mouseover", function(data) { d3.select(this).attr("r", 5) d3.select(this).style("stroke", "000000") d3.select(this).style("stroke-width", "2px") d3.select('.tooltip') tooltip.transition() .duration(200) .style("opacity", .8); tooltip.html("tooltip!") }) .on("mouseout", function(data) { d3.select(this).attr("r", 1.5) d3.select(this).style("stroke", "000000") d3.select(this).style("stroke-width", "0px") }) }); body { font: 10px sans-serif; } .axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; } .tooltip { word-wrap: normal; position: absolute; text-align: center; min-height: 20px; min-width: 30px; padding: 2px; font: 14px; color: #fff; background-color: rgba(51,51,51,.85); border: solid thin black; } .tooltip.show { opacity: 0.9; }
