Javascript 无法对d3.js中的顺序数据（字符串）执行刷洗_Javascript_D3.js

Javascript 无法对d3.js中的顺序数据（字符串）执行刷洗

javascript d3.js

Javascript 无法对d3.js中的顺序数据（字符串）执行刷洗,javascript,d3.js,Javascript,D3.js,我想在focus+上下文散点图中沿x轴执行刷牙，其中x轴和y轴都是带字符串的顺序比例。这里提供了链接用于数字数据但在此上下文中停止工作的刷牙。请告诉我如何对这些数据进行刷牙 <!DOCTYPE html> <meta charset="utf-8"> <style> svg { font: 10px sans-serif; } .axis path, .axis line { fill: none; stroke: #000

我想在focus+上下文散点图中沿x轴执行刷牙，其中x轴和y轴都是带字符串的顺序比例。这里提供了链接用于数字数据但在此上下文中停止工作的刷牙。请告诉我如何对这些数据进行刷牙

<!DOCTYPE html>
<meta charset="utf-8">
<style>

svg {
    font: 10px sans-serif;
}


.axis path, .axis line {
     fill: none;
     stroke: #000;
     shape-rendering: crispEdges;
}

.brush .extent {
    stroke: #fff;
    fill-opacity: .125;
    shape-rendering: crispEdges;
}

.dot {
     stroke: #000;
}

</style>
<body>
     <script src="http://d3js.org/d3.v3.min.js"></script>
     <script>

          var x_data = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec","Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec","Jan","Feb","Mar"];
          var y_data = ["boy","girl","lady","man","woman","boy","boy","girl","woman","girl","boy","lady","girl","boy","girl","woman","lady","boy","lady","boy","man","man","girl","girl","boy","man","boy"];

function getData( )
{
  var dataset = [];


  var num_of_items = x_data.length;

  for (var i = 0; i < num_of_items; i++) {

    dataset.push( { date: x_data[i], price: y_data[i]  } );
  }
  return dataset;
}

var data = getData( );


var margin = {top: 10, right: 10, bottom: 100, left: 40},
margin2 = {top: 430, right: 10, bottom: 20, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom,
height2 = 500 - margin2.top - margin2.bottom;


var x = d3.scale.ordinal(),
x2 = d3.scale.ordinal(),
y = d3.scale.ordinal(),
y2 = d3.scale.ordinal();


var xAxis = d3.svg.axis().scale(x).orient("bottom"),
xAxis2 = d3.svg.axis().scale(x2).orient("bottom"),
yAxis = d3.svg.axis().scale(y).orient("left");

var brush = d3.svg.brush()
.x(x2)
.on("brush", brushed);

var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);

var focus = svg.append("g")
.attr("class", "focus")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var context = svg.append("g")
.attr("class", "context")
.attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");


x.domain(x_data);
y.domain(y_data);

x.rangeRoundBands([0, width], 0);
y.rangeRoundBands([height, 0], 0);

x2.domain(x.domain());
y2.domain(y.domain());

x2.rangeRoundBands([0, width], 0);
y2.rangeRoundBands([height2, 0], 0);






focus.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);

focus.append("g")
.attr("class", "y axis")
.call(yAxis);


context.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height2 + ")")
.call(xAxis2);

context.append("g")
.attr("class", "x brush")
.call(brush)
.selectAll("rect")
.attr("y", 0)
.attr("height", height2 + 7);

// draw dots
focus.selectAll(".dot")
.data(data)
.enter().append("path")
.attr("class", "dot")
.attr("d", d3.svg.symbol().type("triangle-up"))

.attr("transform", function(d) {
    console.log( x(d.date) + "," + y(d.price) );
    return "translate(" + x(d.date) + "," + y(d.price) + ") " + "rotate(90)"; })
.style("fill", "blue");

context.selectAll(".dot")
.data(data)
.enter().append("path")
.attr("class", "dot")
.attr("d", d3.svg.symbol().type("triangle-up"))

.attr("transform", function(d) { return "translate(" + x2(d.date) + "," + y2(d.price) + ") " + "rotate(90)"; })
.style("fill", "blue");


function brushed() {

    x.domain(brush.empty() ? x2.domain() : brush.extent());
    focus.select(".x.axis").call(xAxis);
    focus.selectAll(".dot").attr("d", d3.svg.symbol().type("triangle-up")).attr("transform", function(d) { return "translate(" + x(d.date) + "," + y(d.price) + ") " + "rotate(90)"; });

}


</script>


svg{
字体：10px无衬线；
}
.轴路径，.轴线{
填充：无；
行程：#000；
形状渲染：边缘清晰；
}
.刷{
冲程：#fff；
填充不透明度：.125；
形状渲染：边缘清晰；
}
多特先生{
行程：#000；
}
var x_数据=[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月”、“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月”、“一月”、“二月”、“三月”]；
var y_数据=[“男孩”、“女孩”、“女士”、“男士”、“女士”、“男孩”、“女孩”、“女孩”、“男孩”、“女士”、“女孩”、“男孩”、“女孩”、“女士”、“女士”、“男孩”、“男士”、“男士”、“女孩”、“女孩”、“男孩”、“男士”、“男孩”]；
函数getData（）
{
var数据集=[]；
var num_of_items=x_data.length；
对于（变量i=0；i


或者，可以在这里（）找到源代码。
我发现可以通过修改brushed函数来完成解决方案
function brushed() {
var extent = brush.extent();

//if (!x2.invert) {
var d = x2.domain(),
    r = x2.range();
extent = extent.map(function(e) { return d[d3.bisect(r, e) - 1]; });

x.domain(brush.empty() ? d : extent);
focus.select(".x.axis").call(xAxis);
focus.selectAll(".dot").attr("d", d3.svg.symbol().type("triangle-up")).attr("transform",    function(d) { return "translate(" + x(d.date) + "," + y(d.price) + ") " + "rotate(90)"; });

//}
}

这个解决方案是从Jason Davies（）找到的。
你的JSFIDLE对我不起作用。我检查了链接，它仍然在工作。但是，您可以在此dropbox链接（）上找到该文件。画笔只返回数据块中的数据，同时排除数据块之间的所有数据。这不是预期的行为。