Dynamic Stroke Dash

GoJS
1

I’m trying to dynamically assign stroke dashing via data binding:

myDiagram.linkTemplate = // for parent-child relationships
    $(go.Link, {
            routing: go.Link.Orthogonal,
            curviness: 5,
            layerName: "Background",
            selectable: false,
            fromSpot: go.Spot.Bottom,
            toSpot: go.Spot.Top
        },
        $(go.Shape, {
            strokeWidth: 2,
            strokeDashArray : []
        },
        new go.Binding("strokeDashArray", "d", function(v){ return v ? [5,5] : [0,0]; }))
    );

My data has a property of d. If it exists and is true I’m expecting the strokeDashArray value to be [5,5] but it’s not assigning it, no dashes no matter the value of data.d. I can confirm the data does have a d value exactly where I want it.

Any help is appreciated.

Thanks!

2

There is an example binding in the Euler sample.

The values [] and [0,0] are not exactly valid values for Shape.strokeDashArray. Setting/binding to those values will effectively set the property to null. It would be more efficient if you used null, in any case.

I cannot reproduce any problem.

3

I can’t get any bindings to work for this. Here’s my simplified version based off of the Euler sample:

myDiagram.linkTemplate = // for parent-child relationships
    $(go.Link, {
            routing: go.Link.Orthogonal,
            curviness: 5,
            layerName: "Background",
            selectable: false,
            fromSpot: go.Spot.Bottom,
            toSpot: go.Spot.Top
        },
        $(go.Shape, {strokeWidth : 2},
            new go.Binding("strokeDashArray", "dash")
        )
    );

And here’s some sample data:

    [{
	"key": 1,
	"n": "Janalee Adams \nBreast (22)",
	"s": "F",
	"dash": null,
	"width": 2,
	"m": 3,
	"f": 2,
	"a": ["Breast"],
	"ux": 100000
}, {
	"key": 2,
	"n": "Father ",
	"s": "M",
	"dash": null,
	"width": 2,
	"m": 5,
	"f": 4,
	"ux": 3,
	"a": []
}, {
	"key": 3,
	"n": "Mother ",
	"s": "F",
	"dash": null,
	"width": 2,
	"m": 7,
	"f": 6,
	"vir": 2,
	"a": []
}, {
	"key": 4,
	"n": "Paternal Grandfather ",
	"s": "M",
	"dash": null,
	"width": 2,
	"ux": 5,
	"a": []
}, {
	"key": 5,
	"n": "Paternal Grandmother ",
	"s": "F",
	"dash": null,
	"width": 2,
	"vir": 4,
	"a": []
}, {
	"key": 6,
	"n": "Maternal Grandfather ",
	"s": "M",
	"dash": null,
	"width": 2,
	"ux": 7,
	"a": []
}, {
	"key": 7,
	"n": "Maternal Grandmother ",
	"s": "F",
	"dash": null,
	"width": 2,
	"vir": 6,
	"a": []
}, {
	"key": 8,
	"n": "Brother 1 ",
	"s": "M",
	"dash": [5, 5],
	"width": 2,
	"m": 3,
	"f": 2,
	"a": []
}]

Stroke dash never changes no matter the value of “dash” in my data.

4

Those appear to be describing nodes, not links.

If you are using the Genogram sample, be aware that there is a big difference between the input data structures (shown on the page) and the data used in the model (which is split up into node data and into link data).

5

Thank you! Yes, got it working by modifying the link data as opposed to the node data.