2017-04-18 17 views
0

相対位置論理、選択と翻訳は一見したところで別々の問題のように聞こえるが、私の場合はそれらが相互にどのように相互関係しているかがわかる。D3相対位置論理、選択、および翻訳

私の今はtransition()の効果を作りたいと思っています。順番どおりに追加したり、何かを削除したりすることができます。そして、何かが上から削除された場合、下の要素は正常に滑ります。空のスペースを埋めるための上。私はそれだけ半機能を持っている、問題は、現在のボタンイベントの下にあるテキストのみを選択する正しいロジックを見つけることができないということです。

ロジックをスキップして、単にselectAll('text')を使用するだけで、正常にトランジションを使用しました。これは、2つのアイテムがある場合にのみ機能します.3つのアイテムを追加すると、それは乱雑になります。なぜなら、遷移するアイテムを識別する適切なロジックがないからです。

他の翻訳問題は、ボタンを移動させることに関連しています。テキストは罰金移行しますが、ボタンは頑固にかかわらず、コメントでlive example.attr('top', new_value)または.attr('transform', 'translate(' + 0+','+new_value+')')

Go]を使用しての入れて、ドロップダウンメニューから物事を選択し、トップ1を削除するために、あなたは私が何を意味するかが表示されます]をクリックしたままになります。

だから、まとめると:

  1. どのように私は、現在のトップ距離よりも大きい任意のテキストのif()の論理チェックを行うことができますか? (つまり、現在のページよりも低いテキスト要素がある場合)

  2. 相対的な位置(縦方向、つまりページの下側)が大きいテキストのみを選択するようにD3に指示するにはどうすればよいですか?

  3. D3でボタンのtopを翻訳または更新する方法を教えてください。この例ではselectAll('button')を使用していますが、理想的にはもっと分かりやすい選択が必要です。

答えて

2

これを達成するにはデータバインディングを使用する必要があります(コード内のrender()機能を参照)。

var margins = { 
 
    top: 200, 
 
    right: 80, 
 
    bottom: 30, 
 
    left: 50 
 
}; 
 

 
var width = 500; 
 
var height = 200; 
 
var itemHeight = 30; 
 

 
var totalWidth = width + margins.left + margins.right; 
 
var totalHeight = height + margins.top + margins.bottom; 
 

 
var y = d3.scaleOrdinal(); 
 

 
var options = [ 
 
    'Add Text', 
 
    'A', 
 
    'B', 
 
    'C', 
 
    'D', 
 
    'E', 
 
    'F', 
 
    'G', 
 
    'H', 
 
    'I', 
 
]; 
 

 

 
d3.select('#choose') 
 
    .on('change', addText) 
 
    .selectAll('option') 
 
    .data(options) 
 
    .enter().append('option') 
 
    .attr('value', function(d) { 
 
    return d; 
 
    }) 
 
    .text(function(d) { 
 
    return d; 
 
    }); 
 

 
var svg = d3.select('body') 
 
    .append('svg') 
 
    .attr('width', totalWidth) 
 
    .attr('height', totalHeight); 
 

 
var graphGroup = svg.append('g') 
 
    .attr('transform', 'translate(' + margins.left + ',' + margins.top + ')'); 
 

 
svg.append('text') 
 
    .text('Mix and Match Text') 
 
    .attr('font-weight', 'bold') 
 
    .attr('x', 15) 
 
    .attr('y', 60) 
 
    .attr('font-size', '24px'); 
 

 
var count = 0; 
 
var intCount = 0; 
 
var textItems = []; 
 

 
function addText() { 
 

 
    var chooseSel = document.getElementById('choose'); 
 
    var choice = chooseSel.options[chooseSel.selectedIndex].value; 
 
    textItems.push(choice); 
 
    render(); 
 
} 
 

 
function removeItem(item) { 
 
textItems.splice(textItems.indexOf(item), 1); 
 
render() 
 

 
} 
 

 
function render() { 
 
    y.range(textItems.map((item, i) => i * itemHeight + 10)).domain(textItems); 
 

 
    var items = graphGroup.selectAll('.item').data(textItems, d => d); 
 
    
 

 
    var enteringItems = items.enter() 
 
    .append('g') 
 
    .attr('class', 'item') 
 
    .attr('opacity', 0) 
 

 

 
    items.merge(enteringItems) 
 
    .transition() 
 
    .attr('opacity', 1) 
 
    .attr('transform', d => `translate(0, ${y(d)})`) 
 
    
 
    items.exit() 
 
    .transition() 
 
    .attr('opacity', 0) 
 
    .remove() 
 

 
    enteringItems 
 
    .append('text') 
 
    .text(d => d) 
 
    .style('text-align', 'center') 
 

 
    enteringItems 
 
    .append('text') 
 
    .attr('class', 'close-button') 
 
    .attr('transform', 'translate(20, 0)') 
 
    .text('x') 
 
    .on('click', d => removeItem(d)) 
 

 
}
text { 
 
    font-family: sans-serif, Play; 
 
} 
 

 
form .s1 { 
 
    position: absolute; 
 
    top: 180px; 
 
    left: 55px; 
 
} 
 

 
*:focus { 
 
    outline: none; 
 
} 
 

 

 
select { 
 
    background: #404040; 
 
    color: #ffffff; 
 
} 
 

 
select option:checked:after { 
 
    background: #ffffff; 
 
    color: #404040; 
 
} 
 

 
.item { 
 
    fill: black; 
 
} 
 

 
.close-button { 
 
    fill: darkgray; 
 
    cursor: pointer; 
 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.8.0/d3.min.js"></script> 
 
<form> 
 
    <select id='choose' class='s1'></select> 
 
</form>

+0

私はそれをしようとしている、本当になめらかに見えます。 v4をダウンロードする必要がありますが、統合するのは難しくありません。 –

+0

あなたの方法は私が自分自身で考えていたものをはるかに超えています。私はそれが大好きです。しかし、私はいくつかを理解することはできません。たとえば、3つのものを追加すると、2番目のアイテムも少し動かされます。 Idではなく、むしろすべてのアイテムが一度追加されるとその点で静的である。また、3つのテキスト項目を追加して中間の項目を削除すると、3番目の項目は少し上に移動します。 3つ目のアイテムを真ん中の場所に正確に移動させる方法はありますか? –

+0

@ArashHowaida私はあなたが求めていることをする方法を示す私の答えを更新しました – thedude

関連する問題