topic Re: Trouble with adding checkbox in Developer

Trouble with adding checkbox

ysapiyev — Tue, 13 Feb 2018 06:52:58 GMT

Hi everyone,

I wanted to add checkbox and tried this code:

svg.selectAll("foreignObject")
        .data(nodes)
        .enter().append("foreignObject")
        .attr('x' , o.x)
        .attr('y',  o.y)
        .attr('width', 50)
        .attr('height', 20)
        .append("xhtml:body")
        .html("<form><input type=checkbox id=check></input></form>")
     .on("click", function(d, i){            console.log(svg.select("#check").node().checked) 
            }) ;

How it can be added using "input"?

Re: Trouble with adding checkbox

v-viig — Tue, 13 Feb 2018 18:21:06 GMT

Hi @ysapiyev

At first, you should include the second body tag since iframe already has it.

The input tag can be added by using d3.append method.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Re: Trouble with adding checkbox

ysapiyev — Wed, 14 Feb 2018 06:24:15 GMT

@v-viig

Can you give an exaple, how it will look like?

Re: Trouble with adding checkbox

v-viig — Wed, 14 Feb 2018 08:07:29 GMT

You might use something like this code snippet:

d3.select(Your_Root_Element)
    .append("input")
    .attr({
        type: "checkbox"
    });

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Re: Trouble with adding checkbox

ysapiyev — Wed, 14 Feb 2018 08:43:28 GMT

@v-viig

I tried something like this:

let input1 = this.svg.append("input")
                    .attr({
                        type: "checkbox",
                        x: 200,
                        y: 50
                    });

However, nothing is shown. What can be wrong?

Re: Trouble with adding checkbox

v-viig — Thu, 15 Feb 2018 07:19:57 GMT

Does this.svg contain an svg element?

Checkbox can be used only in HTML elements such as div, table, footer, etc.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Re: Trouble with adding checkbox

ysapiyev — Thu, 15 Feb 2018 09:45:59 GMT

@v-viig,

So, as I understood, I should add div to svg, then add to it checkbox?

let checkbox_d = d3.select("div")
.append("input")
.attr(type: "checkbox");

Is it correct?

Re: Trouble with adding checkbox

v-viig — Fri, 16 Feb 2018 07:41:32 GMT

You should add a div container to the root element.

After that you should include input element and svg element into this div container.

SVG element supports the only SVG elements.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Re: Trouble with adding checkbox

ysapiyev — Fri, 16 Feb 2018 07:56:09 GMT

@v-viig,

So it will look like that?

let check= d3.select('body')
.append('div')
.append('input')
.type('checkbox')
let svg = d3.select(div)
.append('svg')

Re: Trouble with adding checkbox

v-viig — Mon, 19 Feb 2018 13:35:07 GMT

Yes, that's correct.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com