JSFiddle - React, Tailwind, and code Playground

by gabs00

JavaScript

var width = 400;
var height = 400;
var padding = 20;
var diagramWidth = 200;
var staticData = {
    depthdefinition: {
        elements: [
            {
                depth: 3,
                value: "oter"
            },
            {
                depth: 30,
                value: "portugeese warship"
            },
            {
                depth: 267,
                value: "Giant Squid"
            },
            {
                depth: 300,
                value: "seabed"
            }
        ]
    }
};
SVG = d3.select("#wellguideDiagram")
    .append("svg")
    .attr({
        width: width + (padding * 2),
        height: height + (padding * 2)
    });

SVG.append("text").text("wrææææææææææææææææææææl").attr({
    y: function (d) { return 250; },
    x: function () { return diagramWidth + 30 + (padding * 2); },
    fill: "red",
    "font-size": "15px",
    dy: ".35em"
});
SVG.selectAll("text")
    .data(function () {
        alert(staticData.depthdefinition.elements);

        for (thing in staticData.depthdefinition.elements) {
            alert(thing + " " + limits.depthdefinition.elements[thing].depth +
                  " " + limits.depthdefinition.elements[thing].value);
        }
        return staticData.depthdefinition.elements;
    })
    .enter()
    .append("text")
    .text(function (d) {
        alert('depth: ' + d.depth + " -> " + d.value);
        return d.depth + " -> " + d.value;
    })
    .attr({
        y: function (d) { return 250; },
        x: function () { return diagramWidth + 30 + (padding * 2); },
        fill: "red",
        "font-size": "15px",
        dy: ".34em"
    });