creating an ID for each unique item in a plot

[caperneoignis]

This is more of a feature request. On smaller objects in say a scatter plot, there is no id to try and link to using jquery.

Example:

<g opacity="1" transform="translate(407.1688232421875,388.3738708496094),scale(1,1)" class="d3plus_rect" style="cursor: pointer;">
<rect class="d3plus_data" x="-24" y="-24" width="48" height="48" fill="#a5c697" opacity="0.9" vector-effect="non-scaling-stroke" style="stroke: rgb(133, 159, 121); stroke-width: 1;" shape-rendering="auto" transform="" ry="25" rx="25"></rect>
</g>

as you can see in the above there is no unique id to link to this item. I'm trying to make a table that displays the same information as the graph. So if you click on an element in the table it makes the item on the graph 'grow' or become more visible. However; if the item is a small one as in the above, there is no way to select that item and change the shape or traits of the DOM.

However, in bigger items that have a label attached to them, there is an id.
Example:

<g opacity="1" transform="translate(1285.162353515625,580.87841796875),scale(1,1)" class="d3plus_rect" style="cursor: pointer;">
<rect class="d3plus_data" x="-49" y="-49" width="98" height="98" fill="#B35C1E" opacity="0.9" vector-effect="non-scaling-stroke" style="stroke: rgb(144, 74, 24); stroke-width: 1;" shape-rendering="auto" transform="" ry="50" rx="50"></rect>
<text id="d3plus_label_Some_Generic_Quiz_rect" class="d3plus_label" opacity="1" font-weight="200" font-family="Helvetica" stroke="none" pointer-events="none" fill="#e9d7cb" text-anchor="middle" font-size="11px" x="-45.5" y="-45.5" style="font-size: 11px;" transform="rotate(0,0,0)scale(1)translate(0,0)rotate(0, 0, 0)translate(0,30.979999999999997)"><tspan x="0px" dy="12.100000000000001px" dominant-baseline="alphabetic" style="baseline-shift: 0%;">Execute Risk</tspan><tspan x="0px" dy="12.100000000000001px" dominant-baseline="alphabetic" style="baseline-shift: 0%;">Generic Quiz</tspan>
</text>
</g>

Is there any plans on making a unique id for the rect class? IE "d3plus_rect_Some_generic_quiz_rect". This will help me out greatly when I'm trying to locate the item using jquery from the datatable script I already have made.

Example:

$(document).ready(function() {
    var table = $("#table").DataTable( {
                data: radarValues,
                columns: [
                    { data: "quiz", title: "Quiz Name" },
                    { data: "avg", title: "Average Score" },
                    { data: "taken", title: "How Many Times Taken" }
                ]
            } );
    //onclick function to find and make circles bigger. 
     $("#table tbody").on("click", "tr", function() {
        //code to find element on form and enlarge it.
        var data = table.row( this ).data();

        if ($(this).css("background-color") != "rgb(255, 255, 0)") {
            $(this).css("background-color", "yellow");

            var str = data.quiz;
            //get ride of the & signs
            str = str.replace("&", "and")
            var eleToEnlarge = "#d3plus_label_" + str.replace(/\s/g, "_")  + "_rect";

            //var element = $(eleToEnlarge).
            var rect = $(eleToEnlarge).closest(".d3plus_data");
            console.log("eleToEnlarge", eleToEnlarge);
            console.log("rect", rect);
            //set the height
            var height = rect.attr("height");
            var width = rect.attr("width");
            rect.attr("height",height + 10);
            rect.attr("width",width + 10);
        }
        else {
            $(this).css("background-color", "white");
            var str = data.quiz;
            //get ride of the & signs
            str = str.replace("&", "and")
            var eleToEnlarge = "#d3plus_label_" + str.replace(/\s/g, "_")  + "_rect";
            var rect = $(eleToEnlarge).closest("rect");
            //var rect = element.closest(".d3plus_data");
            //set the height
            var height = rect.attr("height");
            var width = rect.attr("width");
            rect.attr("height", height - 10);
            rect.attr("width", width - 10);
        }
    } );//end of onclick function
} );//end of document ready

sorry for the formatting of the jQuery I copied it over from Eclipse and the tabs stayed. I'm a little two lazy to back space all the lines. I know, not really an excuse, but it's Friday.

Also here is the code for the call to d3plus. This is being generated by php, after the data is pulled from mongo and formatted to json.

var radarValues = ['.$stringForJsonRadar.']                                     
var visualization = d3plus.viz()
.container("'.$docID.'")
.data(radarValues)
.type("scatter")
.id("quiz")
.x("taken")
.y("avg")
.size("taken")
.descs({
    "taken":"How many times a test was taken",
    "avg": "The avg grade per attempt"
    })
.tooltip(["taken", "avg"])
.draw()

[davelandry]

Instead of jumping around trying to assign a standard ID to all shape types, I just applied an unique ID to each data <g>. This fix will be part of the next release. 🍻

[caperneoignis]

That was something I was thinking of after making the request, because it makes more sense. Thanks! Will help me out a load, with these graphs I'm making.