通过 JavaScript & d3 以编程方式并排输入两种形式

Question

虽然我已经看过很多类似的问题，并尝试了很多变体，但我无法同时获得这两种输入形式。毫无疑问，我错过了适用于这种情况的组合。赞赏建议。

#CURSOR_TB {
  display: inline;
}

#OFFSET_SLIDER {
  display: inline;
}

<div id = "controls"> </div>

var setupCursorTextBox = function() {
  var S1;
  S1 = d3.select("#controls")
    .append("form")
    .append("label")
    .text("cursor ")
    .insert("input")
    .attr({
        type: "text",
        id: "CURSOR_TB",
        class: "cursor",
        value: ""
    })
} // End of setupCursorTextBox

var setupSliders = function() {
  var S1;
  S1 = d3.select("#controls")
    .append("form")
    .append("label")
    .text("offset ")
    .insert("input")
    .attr({
        type: "range",
        id: "OFFSET_SLIDER",
        class: "slider",
        min: 0.0,
        max: 100.0,
        value: 0.0,
    })
} // End of setupSliders

setupCursorTextBox();
setupSliders();

Answer 1

您可以只添加一行 CSS:

form { display: inline-block; }

或者为每个表单添加一个内联样式：

.append("form")
.style("display", "inline-block")
  .append("label")
  //... etc

或者为每个表单添加一个 class 来定义相同的属性:

// in CSS: .inline-form { display: 'inline-block' }
.append("form")
.attr("class", "inline-form")
  .append("label")
  //... etc

通过 JavaScript & d3 以编程方式并排输入两种形式

Two input forms side-by-side programatically via JavaScript & d3

javascript

css

d3.js