How to use the d3/d3.select function in d3
To help you get started, we’ve selected a few d3 examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
pvsioweb / pvsio-web / examples / demos / facit / js / index.js View on Github 
}, {
parent: "facit",
visibleWhen: "shift = 8",
callback: onMessageReceived,
color: "white" // does this button light up?
});
device.direction = new BasicDisplay("direction", {
top: 266,
left: 666,
width: 10,
height: 16
}, {
parent: "facit",
backgroundColor: "red"
});
device.bell = d3.select("#bell");
/**
function to handle when an output has been received from the server after sending a guiAction
if the first parameter is truthy, then an error occured in the process of evaluating the gui action sent
*/
function onMessageReceived(err, event) {
function zeropad(x, n) {
function zero(k) {
var ans = "";
while (k-- > 0) {
ans += "0";
}
return ans;this.style["border-width"] = opt.borderWidth + "px";
this.style["border-style"] = opt.borderStyle;
this.style["border-radius"] = opt.borderRadius;
this.style["border-color"] = opt.borderColor || "steelblue";
this.style.overflow = opt.overflow || "hidden";
this.style["margin-left"] = (isNaN(parseFloat(opt.marginLeft))) ? "0px" : parseFloat(opt.marginLeft) + "px";
this.style["margin-top"] = (isNaN(parseFloat(opt.marginTop))) ? "0px" : parseFloat(opt.marginTop) + "px";
this.style["white-space"] = "nowrap";
this.style.opacity = (isNaN(parseFloat(opt.opacity))) ? 0.9 : opt.opacity;
this.style.blinking = opt.blinking || false;
this.style.cursor = opt.cursor || "default";
this.style["overlay-color"] = opt.overlayColor;
this.widget_template = opt.widget_template || widget_template;
var res = Handlebars.compile(this.widget_template, { noEscape: true })(this);
if (d3.select(this.parent).empty()) {
console.error("Error: " + this.parent + " does not exist. Widget '" + id + "' cannot be attached to DOM :((");
}
d3.select(this.parent).append("div").style("height", "0px").style("width", "0px").html(res);
this.div = d3.select("#" + this.id);
this.base = d3.select("#" + this.id + "_base");
this.overlay = d3.select("#" + this.id + "_overlay");
this.setStyle(this.style);
this.hide();
return this;
}d3.select("#plug_syringe_saline").on("click", function () {
ButtonActionsQueue.getInstance().queueGUIAction("plug_syringe_saline", onMessageReceived);
});
d3.select("#spike_saline_bag").on("click", function () {
ButtonActionsQueue.getInstance().queueGUIAction("plug_bag_saline", onMessageReceived);
});
d3.select("#plug_syringe_contrast").on("click", function () {
ButtonActionsQueue.getInstance().queueGUIAction("plug_syringe_contrast", onMessageReceived);
});
d3.select("#spike_contrast_bag").on("click", function () {
ButtonActionsQueue.getInstance().queueGUIAction("plug_bag_contrast", onMessageReceived);
});
d3.select("#connect_infusion_set").on("click", function () {
ButtonActionsQueue.getInstance().queueGUIAction("connect_infusion_set", onMessageReceived);
});
d3.select("#restart_simulation").on("click", function () {
ButtonActionsQueue.getInstance().queueGUIAction("restart_simulation", onMessageReceived);
});
d3.select("#rotate_injector").on("click", function () {
ButtonActionsQueue.getInstance().queueGUIAction("rotate_injector", onMessageReceived);
});
//register event listener for websocket connection from the client
client.addListener('WebSocketConnectionOpened', function (e) {
console.log("web socket connected");
//start pvs process
client.getWebSocket().startPVSProcess({name: "main.pvs", demoName: "stellantV2PISA/pvs"}, function (err, event) {
client.getWebSocket().sendGuiAction("init_precache;", onMessageReceived);
});
}).addListener("WebSocketConnectionClosed", function (e) {
console.log("web socket closed");
}).addListener("processExited", function (e) {function showWidgetPreview(widgetType) {
if (widgetType === "button") {
widgetPreviewer.preview(widgetType, {
keyboardKey: d3.select("#keyCode").node().value.trim(),
buttonReadback: d3.select("#buttonReadback").node().value.trim()
});
} else if (widgetType === "display") {
widgetPreviewer.preview(widgetType, {
auditoryFeedback: d3.select("#auditoryFeedback").node().checked,
fontsize: d3.select("#fontsize").node().value.trim(),
fontColor: d3.select("#fontColor").node().value.trim(),
backgroundColor: d3.select("#backgroundColor").node().value.trim()
});
} else if (widgetType === "numericdisplay") {
widgetPreviewer.preview(widgetType, {
auditoryFeedback: d3.select("#auditoryFeedback").node().checked,
fontsize: d3.select("#fontsize").node().value.trim(),
fontColor: d3.select("#fontColor").node().value.trim(),
backgroundColor: d3.select("#backgroundColor").node().value.trim()
});
} else if (widgetType === "touchscreenbutton") {function updateRegex() {
var predefined = d3.select("#predefinedRegex").property("value"),
prefix = d3.select("#prefix").property("value"),
r = prefix + ":=(" + predefined + ")";
d3.select("#regex").property("value", r);
}updateTheorem: function (event) {
var data = { actions: default_data.actions, disp: ["disp"] };
var transitions = d3.select("#FeedbackTemplate").select("#transitions").node();
var attributes = d3.select("#FeedbackTemplate").select("#stateVariable").node();
if (attributes && attributes.selectedOptions && attributes.selectedOptions.length > 0) {
data.disp = [];
for (var i = 0; i < attributes.selectedOptions.length; i++) {
if (attributes.selectedOptions[i].value !== "") {
data.disp.push(attributes.selectedOptions[i].value.replace(/\./g, "`"));
}
}
}
d3.select("#pvs_property").node().value = Handlebars.compile(theoremTemplate)(data);
d3.select("#pvs_theorem").node().value = Handlebars.compile(pvs_theorem_induction, { noEscape: true })(theorem_data);
d3.select("#prooflite_strategy").node().value = Handlebars.compile(prooflite_strategy_induction, { noEscape: true })({
theorem: theorem_data.theorem_name,
transition_relation: theorem_data.transition_relation,
transition_names: data.actions
});
},
right: function (event) {initialize: function (data) {
var _this = this;
this._d3El = d3.select(this.el);
this._d3El.attr("class", "overlay").style("top", self.scrollY + "px");
this._screenDropdown = new ScreenDropdownView({
collection: data.screenCollection,
up: false,
buttonClasses: ""
});
this.listenTo(this._screenDropdown, "screenSelected", function (selected) {
_this._screen = selected;
this._screenDropdown.setSelected(selected);
});
this._template = Handlebars.compile(template);
this._data = data;
this.render();window.setTimeout(function () {
d3.select("#btn2_up").transition().duration(200).style("opacity", 1);
d3.select("#btn2_down").transition().duration(200).style("opacity", 0);
}, 200);
}this.py = this.height * 0.5;
this.px = 0;
this.opx = this.px;
this.opy = this.py;
opt.range = opt.range || {};
this.range = {
max: opt.range.max || 100,
min: opt.range.min || 0
};
this.range.med = opt.range.med || ((this.range.max - this.range.min) / 2);
this._alarm = {
max: (opt.alarm && opt.alarm.max) ? opt.alarm.max : 0,
min: (opt.alarm && opt.alarm.min) ? opt.alarm.min : 0
};
this.refreshRate = opt.refreshRate || 160;
this.div = d3.select(this.parent)
.append("div").style("position", "absolute")
.style("top", this.top + "px").style("left", this.left + "px")
.style("width", this.width + "px").style("height", this.height + "px")
.style("margin", 0).style("padding", 0)
.style("background-color", this.backgroundColor)
.style("display", "block").attr("id", id).attr("class", id);
opt.tracings = opt.tracings || {};
opt.tracings.labels = opt.tracings.labels || {};
opt.tracings.labels.width = opt.tracings.labels.width || this.width * 0.07;
opt.tracings.labels.height = opt.tracings.labels.height || this.height / 6;
opt.tracings.height = opt.tracings.height || this.height * 0.8;
opt.tracings.width = opt.tracings.width || this.width * 0.62;
opt.tracings.left = opt.tracings.left || opt.tracings.labels.width + this.width * 0.01;
opt.value = opt.value || {};function onMessageReceived(err, event) {
d3.select(".demo-splash").style("display", "none");
d3.select(".content").style("display", "inline-flex");
function prettyprint(v) {
var x = parseInt(v);
if (x < 10 ) {
return "00" + v;
} else if (x < 100) {
return "0" + v;
} else return v;
}
function render_saline_volume(res) {
if (res.display_saline === "MIRROR_PLUNGER_LEVEL") {
d3.select("#display_saline").node().setAttribute("class", "");
device.plunger_saline.setValue(prettyprint(res.plunger_saline));
} else if (res.display_saline === "MIRROR_TARGET_VOLUME") {
d3.select("#display_saline").node().setAttribute("class", "");
