Trouble with adding checkbox

[ysapiyev]

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"?

[v-viig]

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

[ysapiyev]

@v-viig

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

[v-viig]

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

[ysapiyev]

@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?

[v-viig]

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

[ysapiyev]

@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?

[v-viig]

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

[ysapiyev]

@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')

[v-viig]

Yes, that's correct.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com